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System Requirements 



These are the minimum system requirements for installing Namo WebEditor 5.5: 

• Windows 95, 98, Me, NT 4, 2000, or XP 

• 32 MB RAM (Windows 95/98/Me) or 64 MB RAM (Windows NT/2000/XP) 

• Hard disk space: 

o 20 MB (minimal installation) 

o 110MB (standard installation, excluding clip art and optional spelling 
dictionaries) 

o 270 MB (complete installation, including clip art) 

• Microsoft Internet Explorer 4 or newer (for internal preview) 

• Resolution 800 x 600 or higher (Monitor and video card supporting 256 colors or higher 
recommended) 

In addition, previewing documents created using the Database Wizard requires Microsoft 
Personal Web Server or Microsoft Internet Information Server to be installed on your 
computer. 
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Installing Namo WebEditor 5.5 



If you are installing from the CD-ROM: 

1 . Insert the Namo WebEditor CD-ROM into your CD-ROM drive. The setup program should start 
automatically. 

2. If the setup program does not start automatically, select the "Run. . ." command in the Windows 
Start menu and enter "D:\setup.exe", where "D" is your CD-ROM's drive letter. 

3. Follow the on-screen instructions to complete the setup. 

4. The first time you run Namo WebEditor, you will be prompted to enter your serial number and CD 
key. Enter the serial number and CD key exactly as found on or inside the CD carrier. 

If you downloaded Namo WebEditor from the Internet: 

1 . Double-click the downloaded installer package. After the compressed setup files have been 
extracted, the setup program will run automatically. 

2. Follow the on-screen instructions to complete the setup. 

3. The first time you run Namo WebEditor, you will be prompted to enter your serial number and 
license key. Enter the serial number and license key exactly as you received them when you 
purchased Namo WebEditor 5.5. 

Please note that installing Clip Art requires an additional 120 MB of hard disk space. 
Therefore, make sure that you have enough disk space before installing Clip Art. If you 
choose not to install Clip Art, you can still use Clip Art as long as you have the Namo 
WebEditor CD-ROM in your CD-ROM drive. 

Registering your software 

We strongly encourage you to register your copy of Namo WebEditor. Registered users 
receive priority access to technical support, free updates, and specially-priced upgrade offers. 
To register Namo WebEditor, please visit the online registration page at 
http://www.namo.com/support/register/. 
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About This Manual 



This manual has been designed especially to meet the needs of first-time users and those with 
limited experience in Web authoring. Thus, each chapter begins with broad overview of topics, 
followed by step-by-step guidelines for using the features provided in Namo WebEditor 5.5. 
Information on all aspects of creating and editing Web documents with Namo WebEditor is 
provided in a detailed manner, helping you to reach the result you want simply by following 
the steps provided. 

Typographical conventions 

The following symbols and typefaces have special meanings and may be found throughout 
this manual: 

Q Information 

Denotes supporting information to the main content of a section or subsection. 
/£> Attention 

Denotes warning information to the main content of a section or subsection. 
Program resource 

A bold, sans serif typeface is used for menu items and other text items found in Namo 
WebEditor's user interface. The menu path is enclosed in square brackets "[" and "]"■ In addition, 
the right angle bracket, ">", is used to separate menu, submenu, and menu item names. For 
example, [Insert > Object > Plug-in...] means the Plug-in menu item in the Object submenu of 
the Insert menu. 

<Keystroke> 

Words in the normal typeface enclosed in angle brackets indicate keystrokes, such as the <Enter> 
key. 

Filename 

A monospaced typeface is used for most filenames, tag names, database field names, and the 
like. 



Getting Technical Support 



Technical support for Namo WebEditor is generally provided by the master distributor of 
Namo Interactive 's products in your country or region of the world. 

Please find the appropriate support contact on our Web site at 

http://www.namo.com/company/contact/index.html. If your country or region is not listed, 
please visit our online customer support pages at http://www.namo.com/support/. You can 
post questions and receive answers online in the Support Forum, or you can also send an 
e-mail containing your question or problem to support@namo.com or fax us at 
+82-2-5599-334. 

Before contacting technical support, we suggest that you check the troubleshooting section of 
the Namo WebEditor online help. The troubleshooting section lists several frequently asked 
questions (FAQs) regarding technical issues. The online help may be accessed by pressing 
<F1> or selecting Namo WebEditor Help in the Help menu. Pressing <F1> in any dialog box 
will open the help system to the relevant help file. 

In addition, you can easily check for updates to Namo WebEditor by selecting Namo 
WebEditor Updates... in the Help menu. You must be connected to the Internet to check for 
updates. 
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Introduction to Namo WebEditor 5.5 



New Features 
Inspector 

The Inspector displays the properties of an object selected in the Edit window. You can modify 
the properties of a selected object using the Inspector, without opening any dialog box. You 
can use the Inspector while it is floating or while it is docked to the right or left of the window. 

Resource Manager 

Resources are elements that constitute a Web document, such as document templates, images, 
Smart Buttons, Clip Arts, etc. Namo WebEditor 5.5 offers the Resource Manager for you to 
manage and use various resources in one location. 

Layout Tables 

A Layout Table is an area where you can insert layout cells and place them as that you want 
simply by dragging. You can create a fine-tuned document layout using layout tables. The 
horizontal and vertical grid lines help you arrange objects in a layout table. You can fit layout 
cells into these grids. Layout cells can only be inserted into a layout table. Anything that can 
be inserted in a cell (text, image, table) can also be inserted into a layout cell. You can specify 
layout table/cell properties including border, margin, and so on. 

Table Style 

Tables are used to display data or to create a consistent layout within a Web document. You 
can modify the table properties, such as background color, border, etc. 

Namo WebEditor 5.5 offers Table Styles. They are pre-designed, various types of tables with 
different table properties. You can rapidly modify properties of a table using the table styles 
offered in the Table Styles tab of the Resource Manager. You can modify the table, cell, or row 
properties using the Table Inspector even after you have applied a table style. 

Hyperlink Toolbar 

Namo WebEditor 5.5 lets you create a hyperlink and specify a Bookmark and Target Frame 
using the Hyperlink Toolbar, without interfacing any dialog box. You can also confirm the 
hyperlink information or modify its properties. 
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Layout Toolbar 



You can modify the size and alignment of layers or layout cells inserted in a layout table using 
the Layout Toolbar. If you have selected multiple layers or layout cells, the criterion of 
alignment or resizing is the one last selected. To display the Layer Toolbar, select the [View > 
Toolbar > Layout] menu command or use the buttons in the Layer Inspector. Buttons on the 
Layout Toolbar are activated only when you have selected more than two layers or layout 
cells. 

Color Sets 

Often, collaborators work on a guideline to use a set of colors to maintain consistency or to 
create a unified atmosphere of a Web site. By using the Color Sets tab in the Resource Manager, 
you can specify frequently used colors and manage them with ease. Colors defined in the 
Color Set can also be sent to other people, which makes it possible for several people to 
collaborate on a project with a defined set of colors. Colors defined in the Color Sets tab can 
be applied to the Color Picker Pop-up icon in the Inspector simply by the drag and drop 
method. 

Flash Buttons 

Namo WebEditor 5.5 lets you insert various Flash Buttons without any specific knowledge 
about Flash animation. You can insert built-in buttons offered by Namo WebEditor or you can 
insert buttons you have created on your own and/or edit Flash Buttons in the Flash Button 
Properties dialog box. You can insert and edit 2 byte languages, such as Korean, Chinese, or 
Japanese within Flash Buttons. 

HTML source clean-up and validation 

There are two methods to creating Web documents using Namo WebEditor. One is to edit a 
document in the Edit window based on the WYSIWYG mode. The other is to code HTML 
tags directly in the HTML tab. In the latter situation, it is easy to make mistakes, such as 
forgetting to close a tag, or repeating redundant tags. Namo WebEditor 5.5 offers HTML 
source clean-up and validation features to resolve the mistakes made when users code HTML 
tags directly in the HTML tab. 

HTML source clean-up 

When you import MS Office documents, or Web documents created by other people or with other 
Web authoring tools, unnecessary tags are imported along with the documents. Namo WebEditor 
offers the Clean Up HTML feature to remove these unnecessary HTML tags. 

Verifying HTML sources 

Namo WebEditor offers the Verify HTML feature so that you can check whether the current Web 
document contains HTML tags compatible with the user-specified HTML version, and whether 
there are any browser-specific tags. You can create Web documents that will be displayed 
properly in any browser using the Verify HTML feature. 
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HTML Source Editing 

Namo WebEditor 5.5 offers an advanced, user- friendly HTML-editing environment. 

Namo WebEditor 5.5 perfectly maintains HTML tags and lets users specify different colors 
for each tag, making it easy for users to distinguish one tag element from another. 

Namo WebEditor 5.5 automatically changes lines, which makes it unnecessary for users to 
check HTML sources using the horizontal scroll bar. 

Improved Features 
Clip Art 

To support the creation of high-quality Web sites, authentic photograph images have been 
added. Namo WebEditor 5.5 has integrated all the Clip Art samples in the Clip Arts tab of the 
Resource Manager. You can also preview the Clip Art files according to their file format (All / 
GIF / JPG). 

Actions and Script Wizard 

Approximately 70 actions, which apply JavaScript effects to layers, have been added in this 
version. The 'Action' button, which was located in each dialog box in the previous version, has 
been removed. Instead, all the actions can be specified in the Action window. Also, the Script 
Wizard offers many more types of scripts. 

Color Picker Pop-up 

The palette, which contains 1 6 colors and user-defined custom colors, has been replaced by 
the Color Picker Pop-up, where you can specify the color you want without using the Color 
Picker dialog box. The Color Picker Pop-up offers 216 Web-safe colors. Web-safe colors refer 
to the colors which are always displayed the same irrespective of operating systems or Web 
browsers. 24 bit True Colors (colors other than 216 Web-safe colors) can be specified by 
opening the Color Picker dialog box by clicking \®\. You can also choose a color in the Edit 
window and apply it to other elements using the dropper [<£]. The Color Picker Pop-up 
contains and displays recent colors you have applied, as well as user-defined custom colors. 
Moreover, in case you select text, hyperlink, or document background color, its default color 
is also displayed for your convenience. 

Database Wizard 

Namo WebEditor 5.5 now supports JSP, a Java-based server-side script, as well as ASP and 
PHP. You can create database-enabled Web documents with a few clicks, which can access, 
add, and modify data on the database server without extra effort or Web programming for the 
database system. 
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Image Effects 



The Image Effects dialog box, which consisted of multiple tabs in Namo WebEditor 4, has 
been converted to the Image Effects window, containing various Image Effects buttons. You 
can crop or resize images as well as apply various image effects. 

Navigation Bars 
Navigation Tree 

You can easily create a tree-shaped navigation bar, which folds and unfolds when clicked. You 
can create a menu which clearly summarizes a Web site containing numerous documents and 
complex structure using the Navigation Tree. As the structure of a site is modified, the links of the 
navigation tree are updated automatically 

Pop-up menu 

You can create a pop-up menu to appear when you place the mouse-pointer over the navigation 
bar. As the structure of a site is modified, the link list and hyperlinks of the navigation tree are 
updated automatically Therefore, you do not need to update the menu manually 

Showing the submenu 

You can create sub-menus to appear along with top menus. 
Specifying target frame 

You can specify the target frame to a navigation bar. 
Navigation Bar made up of Flash Buttons 

You can use Flash Buttons on a navigation bar. Text and links applied to a button are 
automatically created and modified by WebEditor. 

Photo Album 

Photo Album is a photograph management tool with enhanced features of Namo WebEditor 4's 
Image Gallery. 

Photo Album creates thumbnails of the photos taken by digital cameras or scanned images and 
connects them with the original images. 

Photo Album automatically creates a Web document containing the original image linked to a 
thumbnail image. 

Photo Album offers various types of photo albums. You can apply special effects, such as frame 
effect, slide holder effect, etc., to thumbnail images. 

Site Manager 

You can manage a site by checking both the Local window, where you can view the file list 
constituting a Site, and the Navigation window, where you can preview the structure of a Web 
site. The Report tab lets you easily check the information on various resources and broken 
links. In the Publish tab, you can publish a site while checking the structure of the local and 
remote site. 
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Navigation View 

You can check the structure of a site in a graphical view. You can also edit the site structure by the 
drag-and-drop method. 

Verifying Hyperlinks 

You can check the broken links by using the Verify Hyperlinks function. 
Easy Publishing 

You can choose and publish only the modified files. 
Intelligent file management 

If you reposition a file within a site, Namo WebEditor automatically modifies the link path of the 
document. This relieves you of the task of modifying the link paths manually. 

Easy Update 

You can apply various themes uniformly to all the documents in a site. Accordingly, you can 
dramatically change the atmosphere of a site by applying a different theme. 

Navigation Bar 

A navigation bar is automatically created according to the site structure. 

Site Wizard 

Modifying the site structure 

You can modify the site structure during the steps of the Site Wizard. You can rename a menu, 
insert a new document, or relocate a document. 

Publish information 

You can set the FTP server information in advance and publish a Web site with just simple click. If 
the FTP server or account are not prepared, you can skip this step. You can set the information 
later when you have acquired the FTP server and account in the Remote Site Settings dialog box. 



Namo WebEditor 4's Site Wizard (4 steps) 




Namo WebEditor 5.5's Site Wizard (5 steps) 




Smart Buttons 

Namo WebEditor 5.5 offers various types of Smart Button samples, such as decorated text, 
banner, background, buttons, etc. You can apply various additional effects to an object used as 
a Smart Button. For instance, you can create a rollover effect using the Smart Button. 
(JavaScript is automatically created.) Smart Buttons can be saved as JPG, PNG format as well 
as GIF format and you can also specify the filename and folder where the Smart Button is 
saved. 
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Editing Tables 

Namo WebEditor 5.5 offers the following new features for editing tables. 
Transposes rows and columns. 
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Cell size pop-up 

As you drag the border of a cell, the cell size is displayed in a pop-up description. It displays the 
size of a cell, whose right border is being dragged, in pixels. 
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Integrated table editing 

The Table Inspector contains the Table, Cell, and Row tab, which enables you to modify the 
respective properties in one location. 

Row (tr) properties 

You can modify table row properties by selecting a row/rows and specifying relevant values in the 
Row tab of the Table Inspector or the Table Properties dialog box. 

Themes 

Navigation bars and themes are separated in Namo WebEditor 5.5, which lets you apply 
navigation bars without having to apply themes to the Web documents. It has also become 
possible to edit and save themes by integrating the ThemeEditor feature to WebEditor 5.5. 



Time Lines 

Namo WebEditor 5.5 has improved the features of Namo WebEditor 4's Time Line. Namo 
WebEditor 5.5 lets you work with Time Lines using the keyboard as well as the mouse. 
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Chapter 1 



Customizing the User Interface 



Customizing the Edit Window 
Customizing the Editing Tools 
Customizing the Toolbars 
Setting Inspector and Action Window 



With Namo WebEditor 5.5, you can easily customize 
your editing environment in any way you like. 



Customizing the Edit Window 



Setting the status bar 

The status bar below the Edit window displays information relevant to the current situation. 

Information shown in the status bar: 

• Shows if there're any modified contents that haven't been saved yet. It's shown 'Modified' 
if there are, and it disappears when saved. 

• Shows whether the editing mode is 'Insert' or 'Modify'. 

• Shows if the document is 'Read only'. Does not show anything if it isn't. 

• If you have selected the [View > Page Layout] menu command, the current page of the 
document is shown. 

| Modified | Insert | Read-only |1 page 

• Shows the HTML tag of the selected object. For example, if you select an image, '<img>' 
will be displayed in the Status bar. 

• Explanation of the selected menu is written in the left side of the Status bar. 
Hiding Status bar 

Remove the Status bar by selecting the [View > Toolbars > Status Bar] menu command. Status 
bar will disappear. (Select the [View > Toolbars > Status Bar] menu command once again to 
make the status bar appear.) 

Document tabs 

The document tabs above the Edit window are used to switch between open documents. Select 
the [View > Toolbars > Document Tabs] menu command to hide the document tabs. 

• Double-click the document tab to open the Document Properties dialog box where you 
can see and modify various information on the document. 

• Click a document tab once to switch to that document. 

• Right-click a document tab to display a shortcut menu with document-related commands. 

• If you hold the mouse-pointer over a document tab, and the document has been saved, 
the full path and filename of the document display. 

Q Press <Ctrl + Tab> to move to different documents. Alternatively, you can scroll the 
mouse wheel while holding down the <Shift> key. 
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Showing/hiding marks and images 



Showing or hiding marks 

Use the [View > Marks] menu command to select which marks to use. 
Table Gridlines [§] 

To toggle the display of the blue outline around tables that are being edited and the dotted 
gridlines in tables that have hidden borders, use the [View > Marks > Table Gridlines] menu 
command, or click the Show/Hide Table Gridlines button on the Standard Toolbar. 

Paragraph Marks [if] 

To toggle the display of marks indicating paragraph breaks and line breaks, use the [View > Marks 
> Paragraph Marks] menu command. 

Space Marks [j-J 

To toggle the display of marks indicating spaces, use the [View > Marks > Space Marks] menu 
command. 

Special Tag Marks |a] 

To toggle the display of marks indicating layer tags, bookmarks, comments, unknown tags, and 
the start of bulleted or numbered lists, and the display of dotted outlines around forms, applets, 
plug-ins, ActiveX controls, and multimedia objects, use the [View > Marks > Special Tag Marks] 
menu command. 



Layer Outlines §|| 

To toggle the display of the gray outlines around layers, use the [View > Marks > Layer Outlines] 
menu command. 

Current Table 

To toggle the display of the blue outline around tables that are being edited, select the [View > 
Marks > Current Table] menu command. 



To toggle the display of all marks, use the [View > Marks > All] menu command. 
Showing or hiding images 

Select [View > Marks] to decide which of them should be shown. 
View Images 

To toggle the display of images, use the [View > Images > View Images] menu command. 
View Background 

To toggle the display of background images, use the [View > Images > View Background] menu 
command. 

View GIF Animations 

To toggle the display of GIF animations, use the [View > Images > View GIF Animations] menu 
command. 



All 



Customizing the User Interface | 3 



Setting window size 

Select the [View > Window Size > User Setting...] menu command to open the Window Size 

dialog box to specify the size of the WebEditor window. 

Zooming the Edit window 

Click Zoom In/Out \&\ on the Standard Toolbar to view the contents of the Edit window 
enlarged or reduced. Select the scale from the drop-down menu. Default is '100%'. Select 
'Page height' to fit the page in the Edit window so that you can see both top and bottom of the 
page at once. Select 'Page width' to resize the page in the Edit window so that you can see 
both left and right end of the page at once. 

H If you use a wheel mouse, scroll the mouse wheel while holding <Cth> key to zoom 
in/out the Edit window. 

Arranging document windows 

When you have multiple documents open, they are maximized by default, and each document 
fills the Namo WebEditor main window while it is the active document. However, if you 
prefer, you can view each document in a separate window by selecting one of the window 
arrangement commands in the Window menu. 



4 | Chapter 1 



Customizing the Editing Tools 



Namo WebEditor provides various tools that facilitates Web document editing. You can 
choose whether to use these tools according to your preferences. 

Setting rulers 

Shows or hides rulers at the edges of the Edit window, and lets you control ruler settings. 
Show All 

Shows or Hides all rulers. Select the [View > Rulers > Show All] menu command to show both 
horizontal and vertical rulers. Select the [View > Rulers > Show All] menu command again to 
hide both rulers. You can also press <Alt + Shift + R> to show or hide all rulers. 

Horizontal Ruler 

Shows or hides the horizontal ruler at the top edge of the Edit window. Select the [View > 
Rulers > Horizontal Ruler] menu command to show the horizontal ruler at the top edge of the 
Edit window. Select [View > Rulers > Horizontal Ruler] again to hide the ruler. 

Vertical Ruler 

Shows or hides the vertical ruler at the left edge of the Edit window. Select [View > Rulers > 
Vertical Ruler] to show vertical ruler at the left edge window. Select [View > Rulers > Vertical 
Ruler] again to hide the ruler. 

Reset Origin 

Resets both rulers' starting point to zero. The origin of a ruler can be moved by clicking the 
small gray box at the corner of the two rulers and dragging the mouse pointer out to a point on 
the ruler, then releasing the mouse button. Select the [View > Rulers > Reset Origin] menu 
command to reset the origins of both rulers. 

Setting the layout grid 

The layout grid is a grid of horizontal and vertical lines that can be used to help align page 
elements. The layout grid is only visible in Namo WebEditor's Edit window; it is not visible in 
a Web browser. To modify the layout grid setting, select the [View > Grid > Show] menu 
command. 

Showing or hiding the layout grid 

To show the layout grid, select the [View > Grid > Show] menu command. To hide the grids, 
select again the [View > Grid > Show] menu command. 
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Snap-to-grid 

When snap-to-grid is on, floating page elements (layers) "snap" to the nearest gridline or 
subdivision. To turn snap-to-grid on or off, use the [View > Grid > Snap] menu command. 

Grid settings 

Use the [View > Grid > Settings...] menu command to open the Guides/Grid tab of the 
Preferences dialog box, so you can set the options for the layout grid. 

Setting layout guides 

Layout guides are horizontal or vertical lines that you can position anywhere in the Edit 
window to help align document elements. Guides are only visible in Namo WebEditor's Edit 
window; they are not visible in a Web browser. Commands for working with guides are in the 
Guides submenu of the View menu. 

Creating a layout guide 

To create a layout guide, you must have one or both rulers turned on. 

1. Select the [View > Rulers] menu command to turn on the rulers. 

2. Select Show All or Horizontal Ruler or Vertical Ruler. You can make vertical and horizontal 
guides from Vertical Ruler and Horizontal Ruler, respectively. 

3. To create a guide, click-hold anywhere inside the horizontal or the vertical ruler and drag out to the 
Edit window. As you drag, a dotted line will follow the mouse pointer. 

4. When the dotted line is at the position where you want the guide to be, release the mouse button. 
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Moving or removing a layout guide 

To move a layout guide, place the mouse pointer on top of the guide you want to move. While 
the mouse pointer is in the shape of a double bar with arrows on each side, click and drag the 
ruler to the new location. To remove the guide, drag it all the way back to the ruler. 

To remove all guides in one step, use the [View > Guides > Clear All] menu command. 
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Copying a layout guide 



If you hold down the <Ctrl> key while dragging a guide, a new guide will be created at the 
position where you release the mouse button. You can work on something with multiple 
guides on. 

Locking layout guides 

To lock the layout guides so that they cannot be accidentally moved, use the [View > Guides > 
Lock] menu command. Use the command again to unlock the guides. 

Hiding layout guides 

You can hide all layout guides without removing them by using the [View > Guides > Show] 
menu command. Use the command again to show the guides. 

Snap-to-guide 

When the [View > Guides > Snap] menu command is selected, floating page elements (layers) 
"snap" to the nearest guide. To turn snap-to-guide on or off, use the [View > Guides > Snap] 
menu command. 

Layout guide settings 

Use the [View > Guides > Settings...] menu command to open the Grid/Guides tab of the 
Preferences dialog box, so you can set the options for layout guides. 

Q By default, the layout guides' are solid lines. You can change these settings using the 
[View > Grid > Settings] menu command. You can also change the color of the grid and 
guides using the same command. 

Q By default, the layout grid's guidelines are spaced 50 pixels apart, with 10 pixels 
between subdivisions. You can change these settings using the [View > Grid > Settings] 
command. You can also change the color of the grid and guides using the same 
command. 
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Customizing the Toolbars 



Setting toolbars 

Showing or hiding toolbars 

Namo WebEditor 5.5 provides various toolbars, such as Standard, Formatting, Image, Table, 
Hyperlink, Form, Layout, and Layout Table Toolbars. When you start the WebEditor Standard 
Toolbar, Image Toolbar, Layout Table Toolbar, and Formatting Toolbar will be placed beneath the 
main menu by default. If that you want to show toolbars other than these, select the [View > 
Toolbars] menu command and select the toolbar that you want to show. If you want to hide a 
toolbar, select again the [View > Toolbars] menu command and deselect the toolbar you want to 
hide. 

Moving toolbars 



Drag the left border _ 0 ^ 53 B of a toolbar to anywhere you want to locate the toolbar. 



Docking and undocking toolbars 

When you run Namo WebEditor, toolbars are docked in the program window beneath the 
main menu by default. If that you want to undock a toolbar, double-click the left border of the 
toolbar. If that you want to dock the toolbar again, double-click the title bar of the undocked 
toolbar or drag the toolbar any where around the Edit window. A box with black borders will 
appear if the toolbar can be docked to that position. 

Editing toolbars 

Select the [View > Toolbars > Customize...] menu command to edit a toolbar in the Toolbars 

dialog box. You can add or remove buttons, or make a new toolbar that contains the buttons 
you use frequently. 
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Creating a new toolbar 

1. Select the [View > Toolbars > Customize...] menu command. 

2. Click New... in the Toolbars dialog box. 

3. In the New Toolbar dialog box, enter a name for the new toolbar in the Toolbar name text box and 
click OK. 





Toolbar name: I 



4. In the Buttons tab of the Customize Toolbars dialog box, select a category. 

5. Drag buttons that you want to add to the new toolbar by dragging and dropping the icons. 




*i 




Select a bull on to read is description To add a bullon Id a loobar, drag a button 
from She box to a toofcar. 
DeKiiptiori 

Uploads doaimenls o> stes to vow remote file. 




Cancel 



Help 



6. 



Click OK. 
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Setting Inspector and Action Window 



When you start Namo WebEditor 5.5, Document Inspector is shown separately from Edit 
window. Double-click the title bar of the Inspector to dock it to the right side of Edit window. 
Double-click the horizontal line placed above the Inspector name to undock the Inspector. 
Inspector can be docked to the right or the left of the Edit window. A box with dark gray 
borders appears if the Inspector could be docked to any position. 

Moving Inspector 

Drag the title bar or the horizontal line in the top, to move the Inspector. You can move the 
Action window by the same method. 

H If you deselect Allow docking in the shortcut menu of the Inspector or the Action 
window, Inspector or Action windows cannot be docked. 

Closing Inspector and Action window 

Click Y at the top-right of the Inspector or the Action window to close. To reopen the Inspector, 
select the [Window > Inspector] menu command. To reopen the Action window, select the 
[Window > Action] menu command, or press <Alt + 7>. 

Resizing Inspector and Action window 

Drag any of the borders of the Inspector and the Action window to resize them. Action window 
and the Inspector may have some blank space above or below. 
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Chapter 2 

Creating Web Documents 



Introduction to Web Documents 
Creating a New Document 
Saving a Document 
Opening a Document 
Redrawing/Reloading the Screen 
Basic Document Editing 
Modifying Document Properties 
Printing a Document 

Namo WebEditor's true WYSIWYG editing environment enables 
even novices to create powerful Web documents with ease. 



Introduction to Web Documents 



What is a Web document? 

In the most general sense, a Web document is any document that can be downloaded 
(copied over communication lines to your own computer) from the World Wide Web. 
Usually, however, when people talk about Web documents, they are talking about 
documents that have been formatted specifically for the Web in HTML (Hypertext 
Markup Language). HTML is a document format designed for the Web, in the same way 
that RTF (Rich Text Format) is a document format designed for word processing. 
Whereas RTF documents are meant to be printed, HTML documents are meant to be 
downloaded from Web servers and displayed in Web browsers. Although HTML is a 
language, you don't need to know HTML in order to create HTML documents, any more 
than you need to know RTF to use a word processor. Visual HTML authoring programs 
like Namo WebEditor let you create Web documents using an intuitive word 
processor-like interface, and the program takes care of generating the necessary HTML 
"source" to make the document readable with a Web browser. 



Web server and Web documents 

Web documents created in HTML can be viewed on the Internet through a Web server. 
The Web server is built on the Internet, and makes use of many of the mechanisms the 
Internet provides. The Web server has a simple architecture. Clients send messages to 
Web servers. The Web servers are responsible for sending the requested information to 
the clients (also known as browsers), who are then responsible for presenting the Web 
document to the user. Therefore, to let others view your Web documents, you must 
publish them to a Web server. There are an endless number of Web servers and each 
carries its own address (URL). Once published, the Web documents can be viewed 
through Web browsers with the corresponding URL for the Web server. 



Special characteristics of Web documents 

Web documents contain hyperlinks 

Perhaps the most important difference between Web documents and other kinds of documents is 
that Web documents usually contain hyperlinks. A hyperlink is something-usually a word or a 
picture-that, when you click on it, causes the Web browser to "go to" a different document. 
Thanks to hyperlinks (also called "links"), Web documents can be connected to one another, 
creating the vast information network known as the World Wide Web. 

Web documents can be interactive 

A Web document isn't limited to static text and pictures. Thanks to scripting languages such as 
Java Script, and multimedia technologies such as Quick Time, a Web document can be an 
interactive, dynamic experience. For instance, you might click on an icon in the document to play 



12 | Chapter 2 



a movie or start a game of Pong. You could click a heading to make a menu drop down, or drag 
pictures of toys into a "basket" for purchasing online. Interactivity is one of the things that makes 
the Web such a powerful medium. 

Web documents are meant to be viewed on a monitor 

Unlike some other document formats, HTML documents are meant primarily to be displayed on a 
computer screen, not printed on paper. Therefore, when creating a Web document you should 
always take into consideration that your document may be viewed on a monitor with different 
characteristics from your own. While your monitor may be set at a resolution of 1024 x 768 pixels 
and 24-bit color, some of your Web site visitors may be using 640 x 480 and 8-bit color. In addition, 
the fonts you use in your document may not be available on your visitors' computers, and the 
same point size can appear as different actual sizes. To make your Web site user-friendly for the 
maximum number of visitors, avoid using fixed table sizes too wide for small screens, and avoid 
layouts that depend on certain lines not breaking in order to look good. 

Web documents are transmitted through Internet connections 

Unlike other documents, which usually reside on a user's computer or local network, a Web 
document must be downloaded to the user's computer through an Internet connection. For some 
visitors, this can be quite slow. Therefore, when designing Web documents you should also take 
into consideration how long the document will take to transfer over a slow connection, such as a 
modem link. Large images and multimedia files slow download times considerably, so use them 
sparingly. 

Q The World Wide Web is one of the most powerful Internet services. Due to the fact 
that it supports various types of multimedia information (text, images, audio, video, 
computational services) it became popular despite its short history. 



Creating Web Documents Using Namo WebEditor 

Working in WYSIWYG mode 

Namo WebEditor supports the WYSIWYG (What You See Is What You Get) Web 
document editing method, which enables even novices to easily create Web documents. If 
you want to edit your document in WYSIWYG mode, work with your documents in 
Namo WebEditor's Edit window. 

Coding directly in HTML 

Advanced users can also create Web documents by coding directly in HTML. You can 
enter HTML codes directly by clicking the Namo WebEditor's HTML tab. Namo 
WebEditor offers a source protection feature, which keeps the HTML code that the users 
have entered from being modified. 
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Creating a New Document 



Creating a new document 

You can rapidly create different types of document using the document templates. 

1 . Select the [File > New...] menu command. 

2. In the Document or Component folder of the Resource Manager window, select the type of 
document you want. The information on the selected document type appears in the Description 
box below the preview area. Click OK and a new document is opened in the Edit window. 

Q You can rapidly create a blank document by clicking New [□] on the Standard 
Toolbar. Additional new documents are named as 'nonamel', 'noname2', with increasing 
integers after 'noname'. These names are the temporary names, which will be used until 
the documents are saved. 

Q To create a frameset document, select the [Frame > New Frameset...] menu 
command. 
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Saving a Document 



Saving a document 

You can save the document you have edited as different formats including XML, Text, as well 
as HTML. When you save the files for the first time, the Save As dialog box appears to modify 
the temporary names (nonamel.htm, noname2.htm...) given by Namo WebEditor. 

1. Click Save [y] or select the [File > Save...] menu command. 

2. In the Save As dialog box, specify the File name and Save as type. 

3. Enter the document title in Title and click OK. 

4. The document is saved and the specified filename appears in the document tab at the top of the 
Edit window. 

HI doc-docum... | 

I C :WM y D o c uments Wd o c -docu m e nLsave , htm | 

Q If the file name is too long to be displayed on the document tab, the truncated part 
appears as If you place your mouse-pointer on the tab, the whole filename is 
displayed as a tooltip along with the path of the file. 

If you have inserted images or multimedia files, a dialog appears asking whether you want to 
save the resource files as well. 

1. In the Copy Resource Files dialog box, decide whether to copy the resource files by checking the 
checkboxes. 

2. Click the Choose Folder... button and specify the folder in which you want to save the files in the 
Choose Folder dialog box. Then click OK. 

3. In the Copy Resource Files dialog box, click OK. 
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Saving a document with a new filename 

You can save the current document with a new filename, format or at a new location. 

1 . Select the [File > Save As... ] menu command. 

2. In the Save As dialog box, enter the File name and specify the type of the file from the Save as 
type drop-down list. 

3. Enter the document title in Title and click OK. 

In case you have inserted images or multimedia files, a dialog box appears asking whether 
you want to copy and save the resource files as well. 

1. In the Copy Resource Files dialog box, decide whether to copy the resource files by checking the 
checkboxes. 

2. Click the Choose Folder... button and specify the folder to which you want to save the files in the 
Choose Folder dialog box. Then click OK. 

3. In the Copy Resource Files dialog box, click OK. 

Q If you want to save a document in a file format other than HTML, select the file format 
you want from the Save as type drop-down menu in the Save As dialog box. 
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Opening a Document 



Opening a document 



1. Click Open Oj on the Standard Toolbar or select the [File > Open...] menu command. 



2. In the Open dialog box, specify the desired file and click Open. Multiple files may be 
simultaneously opened by selecting more than 2 files. 

3. The selected document is opened in the Edit window. If you have opened multiple files, the 
corresponding documents are opened in tabs. Pressing <Ctrl+Tab> lets you move quickly 
between different documents. 

Hf doc -spllLpa... lnjdoc-url.htm | ||J doc-find_c.,. 



H Clicking the file names while pressing the <Ctrl> key in the Open dialog box allows 
you to select multiple files. Clicking one file name and then another file name while 
pressing the <Shift> key in the Open dialog box lets you select all the files between the 
two clicked. 

Q You can open the documents you have worked with recently using the [File > Recent 
Files] menu. To update the open documents to the latest version, select the [View > 
Redraw Screen] menu command. 



Opening a URL 

If you are connected to the Internet, you can open a Web page by entering the URL of the 
page. 

1 . Click Open \&\ on the Standard Toolbar or select the [File > Open...] menu command. 

2. In the Open dialog box, enter the URL of the Web page you want to open in URL text box. 

3. Click Open URL. 



Q You can save a document directly to your Web server if you have opened the 
document in your account using Open URL. To do this, you should set the relevant 
information in the Remote Sites dialog box. In case you have opened a document, which 
is write-protected, using Open URL, you should use Save As command to save the 
document. 
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Opening the most recent files 

You can easily open the documents you have worked with recently to check or edit them. 

1. Select the [File > Recent Files] menu command. 

2. Select the file you want to work with from among the recent file list. 

3. The selected file is opened. 

H Running Namo WebEditor lets the documents you previously worked with be 
automatically opened. You can modify this setting by using Load most recent documents 
at startup option at the Edit tab in the Preference dialog box. 

Q In case you have moved or deleted the file, Namo WebEditor shows an alarm 
message "Can't open **(the path of the deleted or moved file)". 

Importing a Web site from the Internet 

Namo WebEditor provides a way to import an entire Web site, or selected parts of it, from the 
Internet. This is useful when you need to edit a site for which you don't have a copy stored on 
your computer, or if your local copy of a site has been damaged or deleted. 

1 . Select the [Tools > Import from Web...] menu command. 

2. Click the Add... button in the Import from Web dialog box to add a new site for importing. 

3. Enter the URL of the site and specify the various importing options in the Import Properties dialog 
box, then click OK. 

4. Click the Import... button in the Import from Web dialog box. 

Q Importing a large Web site can take an excessively long time, especially over a slow 
Internet connection. To avoid tying up your computer for hours while importing a site, try 
limiting the depth of links that will be followed, or specify that files larger than a given size 
should not be downloaded. These and other options are available at the Advanced tab of 
the Import Properties dialog box. Once importing is under way, if you decide to finish 
downloading the site, click the Stop button in the Import from Web dialog box. 
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Redrawing/ Reloading the Screen 



Redrawing the screen 

On rare occasions, the Edit window may not show the results of your last operation. In such 
cases, select the [View > Redraw Screen] menu command or press < Shift + F5> to refresh the 
window. 

Reloading the current document 

There are two reasons why you may want to reload the current document. 

• You can reload the current document using a different language encoding (character set) 
from the current one. This can be useful if you want to see how the document will look in 
a different language encoding, without actually making changes. To reload the current 
document using a different encoding, select the [View > Encoding] menu command and 
select the desired encoding from the submenu. If there are unsaved changes in the 
document, you will be prompted to save the document. To reload the document again 
using the encoding specified in the General tab of the Document Properties dialog box, 
select the [View > Encoding > Current Encoding]. 

• If you want to discard all changes made to the current document since the last time you 
saved it, press <F5>. When prompted whether to save the document, click No. The 
changes that are made since the last time you've saved the document are discarded and 
the document goes back to the state of last saving. 
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Basic Document Editing 



Entering text in the Edit window 

Using Namo WebEditor's Edit window is very similar to using a word processor—the basic 
techniques for entering, editing, and formatting text are the same. To enter new text in the Edit 
window, simply start typing. The text you type will appear at the cursor (the blinking vertical 
bar; also called 'insertion point'). 

1. Open a new document (or one on your local hard drive) in the Edit window by selecting New [□] 
on the Standard Toolbar. 

2. Enter the text you want simply by typing. 

3. The entered text appears where the cursor is located. 

13 If you press <Enter>, a new paragraph is created and an empty line is inserted 
between the paragraphs. If you want to change lines only without inserting an empty line, 
select the [Insert > Line Break > Normal] menu command or press <Shift + Enter>. 
Selecting the [Insert > Line Break > All/Left/Right] menu command allows you to change 
lines in different ways according to the left or right margin. 

Q If you activate Show/Hide Paragraph Marks [it] on the Standard Toolbar by clicking 
it, the line break mark (<J ) and paragraph mark (^f ) will be displayed in the Edit window. 

Cut/Copy/Paste 

Selected content of your document can be cut or copied, then pasted into the Edit window. 
Cutting 

1 . Select the section that you want to cut in the Edit window. 

2. Select the [Edit > Cut] menu command or click Cut 0 on the Standard Toolbar. (Or simply press 
<Ctrl + X>.) 

Copying 

1 . Select the section that you want to copy in the Edit window. 

2. Select the [Edit > Copy] menu command or click Copy on the Standard Toolbar. (Or simply 
press <Ctrl + C>.) 

Pasting 

1 . Place your cursor where you want to paste the recently copied or cut section. 

2. Select the [Edit > Paste] menu command or click Paste on the Standard Toolbar. (Or press 
<Ctrl + V>.) 

B9 Namo WebEditor supports the HTML clipboard, which enables you to copy and paste 
hyperlinks as well as plain text. If you want to copy some part in addition to the copied 
contents in your clipboard, press <Ctrl + Shift + C>. 
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H When you cut or copy a selection to the clipboard, the selection replaces whatever 
was already in the clipboard, if anything. If you want to append a selection to the existing 
clipboard contents, instead of replacing the clipboard contents, hold down the Shift key 
while you cut or copy. 

Q To delete the part you have selected, select the [Edit > Delete] menu command or 
press <Del>. 

Q To select the whole document, select the [Edit > Select All] menu command or press 
<Ctrl +A>. 

G) If you decide you didn't really want to delete/paste/cut/copy the text, select the [Edit > 
Undo] menu or click Undo Q on the Standard Toolbar. You may also simply press 
<Ctrl + Z>, before doing anything else. 

Copying and pasting formats 

Formatting attributes, at both the character and the paragraph level, or image, chart, or table 
properties can be conveniently copied from one block of text to another by copying and 
pasting them. For example, to copy and paste character attributes, take the following steps. 

1 . Place the cursor within the block of text that has the formats that you want to copy. (Do not select 
the block.) 

2. Select the [Edit > Copy Format...] menu command or press <Shift + F2>. 

3. In the Copy Format dialog box, select the types of formatting attributes to copy and click OK. 
(Paragraph style refers to all paragraph attributes, not just HTML style.) 

4. Select the block of text to which that you want to paste the copied formats. If you are pasting only 
paragraph formats, simply place the cursor within the block. 

5. Select the [Edit > Paste Format] menu command or press <F2>. 

Finding text 

You can quickly find a certain word or phrase in the current document. 

1. Select the [Edit > Find...] menu command or press <Ctrl + F>. 

2. In the Find/Replace dialog box, enter the word or phrase that you want to find in the Find text box. 

3. Specify Options and Direction and range. 

4. Click the Find Next button and the found word is displayed in the Edit window. 

5. To continue finding additional instances of the word, click the Find Next button. 

Q If the cursor is located in the middle of the document, you should select Start at top 
of document to find all instances of the item. Click Replace with and the text box is 
activated so that you can execute the task of replacing a certain text with another. 

13 You can repeat finding the text you have just found by selecting the [Edit > Find 
Again] menu command. 
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Replacing the text 

You can replace a certain word or phrase in the current document with another word 

1. Select the [Edit > Find...] menu command. 

2. In the Find/Replace dialog box, enter the word or phrase that you want to find in Find and the item 
you want to insert instead of the Find item in Replace with. 

3. Click the Replace button and the word you have specified in Find is replaced with the item you 
have entered in Replace with. 

4. To keep replacing, click the Replace button again. 

5. To replace all occurrences of the found text at once, click the Replace All button. 

Q ^ you select an item you want to find in the Edit window and open the Find/Replace 
dialog box, the selected item is automatically inserted in the Find text box. 

19 If multiple documents are open, select the Search all open documents option and 
click the Replace All button, which performs the task of finding and replacing the 
specified item in all open documents in the Edit window. 

Undo/Redo 

Namo WebEditor supports multiple undo functions. If necessary, take the document back to 
its previous state. Redo is applicable only after you applied more than one 'undos'. 

1. Click Undo Q on the Standard Toolbar or select the [Edit > Undo] menu command. You can 
also press the shortcut key <Ctrl + Z>. 

2. Undo lets you take back the last change. 

3. If you continue clicking Undo Q Namo WebEditor undoes the latest changes one by one in 
reverse order. 

4. If you click Redo Namo WebEditor reverses the affect of the last Undo action. 

Q If you turn the Auto Correct function on, a word you typed can, against your 
expectation, turn into another word. In this case, click Undo Q or press the shortcut 
key <Ctrl + Z>. 

Auto Correct 

The Auto Correct feature can be used to automatically detect and correct typos, misspelled 
words, grammatical errors, and incorrect capitalization. For example, if you type "it;s", Auto 
Correct automatically replaces what you typed with "it's". Initially, the Auto Correct list 
contains over 1 ,000 corrections for the most common capitalization errors, typos, and spelling 
errors. You can also use Auto Correct to quickly insert commonly used phrases without having 
to type them out. For example, you can add an Auto Correct item to replace "ni" with "Namo 
Interactive Inc.". 

1 . Select the [Tools > Auto Correct...] menu command. 
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2. In the Auto Correct dialog box, the list box shows the list of words that will be auto corrected, and 
their replacements. To disable an individual Auto Correct item, click the check box next to it. 

3. Click the Add... button to add a new Auto Correct item, or select an existing Auto Correct item 
from the list and click the Modify... button to edit it. 

4. In the Auto Correct Information dialog box, enter in the Replace text box the word or phrase that 
will be replaced with the word or phrase entered in With text box and click OK. 

5. In the Auto Correct dialog box, click OK. 

• If you want to replace a part of a word, two special symbols are available: '-' (hyphen) and 
'*' (asterisk). For example, enter '-late' such as 'belated' with 'beloved', 'late' by itself will 
not be replaced. 

• If you want to expand the target of Auto Correct to the items including a certain item, use 
'*'. '*' can be anything including nil. For example, 'auto*' represents all the words including 
'auto' such as 'auto', 'automatic', 'automation', etc. 

• If you want to use the auto linking feature, enter @*(the word you want to replace) in the 
Replace text box and the URL in the With text box. Example: "@Namo*" => 
"http://www.namo.com*" (If you enter "@Namo", "Namo" appears with the hyperlinks 
whose URL is "www.namo.com".) 

Q By default, the Auto Correct option is enabled. You can always turn on or off the 
Auto Correct option by selecting the [Tools > Auto Correct...] menu command and 
checking/unchecking the Enable auto correct check box in the Auto Correct dialog box. 

Spelling check 

Check Spelling suggests corrections for misspelled words and offers other spelling-related 
functions. 

1. Select the [Tools > Check Spelling...] menu command or press <F7>. 

2. The Spelling Check dialog box is opened. If no spelling error is found, the message "The spell 
check is complete." appears. If you click OK, the Spelling Check dialog box is closed. 

3. If you want to skip a word detected, click Ignore. If you want to correct a word detected, click 
Change. 

4. Click OK. 

Q If y° u select the Check spelling as you type option at the Edit tab of the Preferences 

dialog box, Namo WebEditor automatically performs the spell check and underlines 
words that should be corrected. 

Inserting horizontal lines 

A horizontal line can be inserted as a divider. 

1. Select the [Insert > Horizontal Line] menu command. 

2. A default horizontal line is inserted in the Edit window, along with a new paragraph break above it. 
To modify the properties of the inserted line, Double-click the horizontal line. 
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3. In the Horizontal Line Properties dialog box, modify Size, Alignment, and Style and click OK. 

Q In the Horizontal Line Properties dialog box, the Color is displayed as specified only 
in Internet Explorer. 

Q The length of the divider is determined by the right margin of the paragraph in which 
cursor was placed before inserting the divider. If the paragraph's right margin was not 
specified, the divider will be as wide as the window. 

Inserting symbols 

Special characters or symbols can be inserted, which cannot be typed using the keyboard. 

1. Select the [Insert > Symbol...] menu command. 

2. In the Symbol dialog box, click the tab you want. The items in the Symbol tab are properly 
displayed irrespective of your Windows character set. On the other hand, the items in the Unicode 
tab are properly displayed only when your Windows character set is preset as Unicode. 

3. Select the symbol to be inserted and click Insert. 

Q Documents including Unicode symbols are properly displayed only when encoding is 
set as Unicode. 

13 The Symbol dialog box remains open until you click Close. 

Inserting comments 

You can add a comment (description) to a document. The entered comment does not appear in 
the browser window and appears within the in the comment tag ("<!--" and "— "> tags) in the 
HTML tab. 

1 . Select the [Insert > Comment...] menu command. 

2. In the Comment dialog box, enter the text you want to insert. 

3. Click OK. 

Q The inserted comment is not displayed in the Edit window. You can make the special 
tag marks visible by selecting the [View > Marks > Special Tag Marks] menu command. 
The position where a comment is inserted is displayed as the special tag mark image [©] 
in the Edit window. If you double-click the image H, y° u can v i ew the comment text and 
modify or delete it. 

Inserting equations 

You can easily create or edit a mathematical formula to insert into the current document. 

1. Select the [Insert > Equation...] menu command. 

2. In the Equation dialog box, enter the equation using the equation and special symbol buttons. 

3. Adjust the size of the equation by clicking the magnifying glass icons and click OK. 

Q The equations you have edited are inserted as images in the Edit window but their 
properties can be modified by double-clicking the image. 
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Inserting the date/time 

The current date and time can be inserted to the document in the selected format. 

1. Select the [Insert > Other > Date and Time...] menu command. 

2. In the Date/Time dialog box, choose the type of date/time format you want from the Available 
formats list box. 

3. Click OK and the date/time is inserted at the cursor location. 

13 Namo WebEditor uses the date/time in your Windows system in inserting a date/time. 
If the wrong date is inserted, check the date/time in your Windows system. 

Converting symbols to DBCS 

If a document contains double-byte characters (such as Japanese or Chinese text) and the 
character set has not been correctly specified, the document will not be displayed correctly in 
a browser. You can use the Convert Symbols to DBCS command to turn illegible symbols into 
legible double-byte characters. 

For example, if you receive an e-mail which contains illegible symbols, copy and paste its 
content into a new window in Namo WebEditor, select the content, and then select the [Tools > 
Change Character Format - Convert Symbols to DBCS] menu command. The content will now 
display correctly. 

Viewing a document outline 

If your document contains headings that use the standard HTML heading tags (<hl>, <h2>, 
etc.), you can view an hierarchical outline of the document by selecting the [Window > 
Document Outline] menu command. This will open a pane on the left side of the Edit window 
that shows each heading in an hierarchical outline, in which the position of each heading 
depends on its position and level within the document. Headings that use the <hl> tag are at 
the highest level; those that use <h2>, at the second level; etc. 

The outline also shows lists that use the standard bulleted list (<ul>) and numbered list (<ol>) 
tags. 

Initially, the outline is shown with all levels expanded. To collapse a level, click the minus 
sign to the left of the heading. Clicking an item in the outline directs the insertion point to the 
position of that item in the document. 

Inserting non-breaking space 

You can enter a Non-Breaking Space to insert consecutive spaces. According to HTML 
Recommendation of the World Wide Web Consortium(W3C), only one space is accepted as 
non-breaking space. However, you may sometimes enter consecutive spaces when working on 
a HTML document. 
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To insert consecutive spaces, enter Non-Breaking Space (&nbsp), and then the spaces are 
maintained. You can insert '&nbsp' not only by selecting the [Insert > Other > Non-Breaking 
Space] menu command, but also by pressing the spacebar consecutively. When you press the 
spacebar, the first space is considered as a general blank, and only those from the second space 
entered are considered as non-breaking spaces. 

To insert a non-breaking space from the beginning, select the [Insert > Other > Non-Breaking 
Space] menu command. 

89 Non-breaking spaces are represented with '&nbsp' tags in the HTML tab while the 
spaces between words are not represented in any tags. 

Inserting a manual line break 

A manual line break is used to start a new line without starting a new paragraph. To insert a 
normal line break, press <Shift + Enter> or select the [Insert > Line Break > Normal] menu 
command. You can also insert a manual line break with various options using [Insert > Line 
Break > All/Left/Right] menu command. 

89 Use manual line breaks only when necessary; do not use them to end every line. 
Using the manual line break in every line makes the document layout awkward, for 
example, making some lines contain only a few characters, as you change the browser 
window size. 

Previewing documents with Netscape or Internet Explorer 

Although you can preview a document using Namo WebEditor's Preview tab (click the Preview 
tab at the bottom of the main window), you can also preview a document in an actual browser. 
Previewing in Netscape is especially a good idea, since Namo WebEditor's Preview tab uses 
the Internet Explorer engine, and Netscape often renders pages somewhat differently from 
Internet Explorer. This will help you to find any visual differences between browsers. 

To see a document in Internet Explorer or Netscape, select the [View > View with Internet 
Explorer], or [View with Netscape] menu command. You can also use the shortcut key <F1 1> for 
Internet Explorer and <F12> for Netscape. 

89 If you prefer to use a different Web browser, you can substitute the browser for either 
Netscape or Internet Explorer in the Browsers tab of the Preferences dialog box. 
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Modifying Document Properties 



Viewing the document information 

1. Select the [File > Document Information...] menu command or press <Ctrl + F1>. 

2. In the Document Information dialog box, check Title, Author, Character set, Background color, 
Background image, Connection speed, resources, and etc. 

3. If you click the Modify..., the Document Properties dialog box appears. Specify the relevant items 
and click OK. 

Q If you select Connection speed in the Document Information dialog box, you can 
check the loading time under the specified connection speed. 

Changing the document encoding 

You can change the encoding of Web documents. 

1. Select the [File > Document Properties...] menu command. 

2. Click the General tab in the Document Properties dialog box. 

3. Select the encoding you want from the Character set drop-down menu. 

Q The default encoding in the Character set drop-down menu is the one specified in the 
Document Defaults tab of the [Tools > Preference...] menu. You can modify the default 
encoding in the Preference dialog box. 

Q You can modify the encoding of all the files in a site at once. Simply select the [Tools 
> Change Character set...] menu command. In the Change Character Set dialog box, 
check Selected documents in the site and click OK. 

Changing the document title 

You can change the document title, which is displayed in the status bar of Web browsers. 

1. Select the [File > Document Properties...] menu command. 

2. In the Document Properties dialog box, click the General tab. 

3. Enter the title of the document in Title and click OK. 

Q You can also modify the information on author, classification, description, keywords of 
your document at the General tab in the Document Properties dialog box. 

Q You can easily modify the document title by double-clicking the document tab, which 
is located at the top of the Edit window, and entering the relevant title in the General tab 
of the Document Properties dialog box. 
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Changing keywords 



Specifying keywords 

If a Web site is registered with an Internet search service, the search robot visits the registered 
site and extracts the meta tags contained in the Web pages. The collected information is used 
as a database for the search engine. Thus you should specify relevant keywords so that 
various search engines can easily locate your Web site. 

What is a meta tag? 

Meta tags are often used to include keywords and a description of a document without making 
the keywords or description visible in a browser. This is a useful way to control how a 
document is summarized by some search engines. 

Example: Setting keywords for the search engines 

<head> 

<title>Namo WebEditor</title> 

<META name-'description" content-'Power that Opens Up the World of Internet, 
Namo WebEditor"> 

<META name-'keywords" content="Namo WebEditor, WebEditor, Namo, Interne t"> 
</head> 

Description 

This is a brief description of the document, and can be used by search engines to provide a 
summary of the document in search results. Most search engines limit the length of the summary, 
so it's a good idea to keep the description to 150 words or less. 

Keywords 

These are keywords that can be used by search engines to categorize and index the document. It 
is suggested that you repeat the main keywords at the beginning. There is also a limitation to the 
number of keywords. The limitation differs in various search engines, however most search 
engines allow up to 200 keywords. 

Entering a summary and/or keywords 

1. Select the [File > Document Properties] menu command and click the General tab. 

2. Type a summary of the document in the Description text box. 

3. Type keywords for the document in the Keywords text box. You can type multiple keywords by 
separating each with a comma. 

4. Click OK. 

Q Some search engines set the priority to the keywords included in your document title. 
In case there is no title in your document, the search engine regards the first sentence as 
a title. Thus, you should specify the document title for your Web page. 

Q Some search engines do not use the keywords tag, instead indexing only the body of 
a document. 
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Printing a Document 



Printing documents 

1. Click Print jS] on the Standard Toolbar or select the [File > Print...] menu command. 

2. In the Print dialog box, specify the range and number of copies and click OK. 

Q You can see a preview of how your document will appear when printed using the [File 
> Print Preview] menu command. This will open the Print Preview window. 

Q You can specify paper size, margin, header/footer in the [File > Page Setup...] menu. 

H If you select the [View > Page Layout] menu command, the print paper is displayed 
in the Edit window, which enables you to edit the document while previewing the print 
copy. The paper size in this display is equivalent to the one specified in the Page Setup 
dialog box. 

Viewing a page layout 

The Page Layout view shows how your document will look when printed. In page layout view, 
the document appears as a paper document on a gray background. The currently specified 
print margins are shown between the edge of the paper and the content. Red, dotted lines 
show where the page breaks will occur. 

To adjust the paper size and print margins, use the Page Setup dialog box by selecting the [File 
> Page Setup...] menu command. You can control where page breaks occur using the [Format > 
Page Break > Insert Page Break] menu command. You can also set the properties of the page 
break by selecting the [Format > Page Break > Page Break Properties] menu command. 

Setting the page setup 

1. Select the [File > Page Setup...] menu command. 

2. In the Page Setup dialog box, specify Paper, Orientation, Margin, Header/Footer and click OK. 

Q Press <Ctrl + Enter> or select the [Format > Page Break > Insert Page Break] menu 
command. The page break will be inserted after a paragraph while the Page Layout 
option is automatically turned on. 

Q You can preview how the Header/Footer will be printed by selecting the [File > Print 
Preview...] menu command. 
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Inserting page breaks 

You can insert page breaks in your documents. 

1. Select the [Format > Page Break > Insert Page Break] menu command. 

2. To set the properties of the page break, select the [Format > Page Break > Page Break 
Properties...] menu command. In the Page Break dialog box, specify the position of page break 
and click OK. 
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H To easily insert a page break, press <Ctrl + Enter>. The layout is automatically 
changed into Page Layout and a page break is inserted after a paragraph. The position 
where the page break is inserted is displayed as a red line in the Edit window. 

J3 To remove the page break you have inserted, select the [Format > Page Break > 
Page Break Properties...] menu command and select Auto in the Page Break dialog 
box. 
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Chapter 3 

The Resource Manager 

What is the Resource Manager? 
Using the Resource Manager 
Editing Groups or Folders 
Sharing Resources 



The Resource Manager stores resources such as document components, clip art, color sets, 
Smart buttons, Flash Buttons, themes, and table styles in one central location. 



What is the Resource Manager? 



The Resource Manager 

The Resource Manager is a managing tool for resources provided with Namo WebEditor, 
including document components, Clip Arts, color sets, Smart Buttons, Flash Buttons, 
themes, and table styles. You can import, delete, and rename resources, and even make a 
thumbnail image of a resource with the Resource Manager. 

Objects that are controlled by the Resource Manager 
Component 

The Component tab consists of Document, Component, Frameset, E-mail, and i-mode folders. 
You can add a new document or insert a new component in the Web document. 

Clip Art 

You can preview the Clip Art files classified by file formats (All / GIF / JPG (JPEG)). 
Color Set 

You can manage frequently used colors in a folder. You can perform co-work easily by sending the 
Color Set information to the coworkers. 

Smart Button 

The Smart Button tab contains various banners and Smart Buttons. 
Flash Button 

The Flash Button tab contains various Flash Buttons. 
Theme 

A theme is a pre-made Web site design. You can select themes from more than 200 choices. 
Table Style 

You can apply various pre-designed table styles. 
All 

Brings all resources together in a single tab. 
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Menu Buttons 



The Menu button located in the lower left comer of the Resource Manager consists of detail 
options for resource management. 



New Group 


Creates a new group. 


New Folder 


Creates a new folder under the selected folder or 
group. 


Delete 


Deletes the selected folder or file. 


Rename... 


Renames the selected folder. 


Import File... 


Imports and saves the file selected in the Open dialog 
box of the specified folder. 


New Color... 


Adds a new color selected in the Color Picker Pop-up 

to the specified folder. 


Refresh 


Refreshes the preview pane. 


Make Thumbnail 


Creates thumbnails that help display the resources in 
the preview pane quickly. This option is available 
only in the Clip Art, Smart Button, Flash Button and 
Color Set tab. 


Convert To 5.5 Theme 


Converts the theme from Namo WebEditor 4 to Namo 
WebEditor 5.5 format. This function is used in the 
Themes tab. 


Zip... 


Creates an archive of resource files of the selected 
group or folder in the Zip file format, so that you can 
send them to others. 


Unzip... 


Unzips the Zip file of a folder and installs the 
unzipped resource files into the Resource Manager. 


Unzip Group... 


Unzips the Zip file of a group and installs the 
unzipped resource files into the Resource Manager. 
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Using the Resource Manager 



Selecting a resource 

1. Select the [Window > Resource Manager...] menu command. 

2. Select a resource tab of the Resource Manager. For example, if that you want to select a 
frameset, select the Components tab. 

3. Select a folder in the category list located on the left side of the Resource Manager. 

4. Resources included in the folder are shown in the preview pane. 

5. Select a resource in the preview pane. A dotted blue border will appear around the resource. 

Applying a resource 

1 . Select a resource in the Resource Manager. 

2. Do one of the followings: 

• Click the button in the bottom right of the Resource Manager. For example, select 
'Framesetl' in the frameset folder of the Components tab, and click New Document. 
Followings are the command buttons that you will see in the Resource Manager. 



Command Description 
Button 


Tabs with the 
Buttons 


New 
Document 


Opens a new document in 
the selected format. 


Component tab 


Insert 


Inserts the selected resource 
in the document. 


Component, Clip 
Art, Smart Button 
and Flash Button 

tabs 


Insert As Bg 


Inserts the selected resource 
as the background of the 
document. 


Clip Art tab 


Add To 
Custom Color 


Adds the selected color to 
the Custom Color. 


Color Set tab 


Apply 


Applies the selected 
resource to the document. 


Theme and Table 
Style tabs 



• Double-click a resource. When you double-click a resource, priority goes to New 
document command first, then to Insert command. 



• Click and drag the resource to the document in the Edit window. Release the mouse 
button when the mouse pointer changes into 
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Editing Groups or Folders 



Creating a new group or folder 

You can create your own resource group besides the ones that Namo WebEditor provides. 
Make a custom resource group which helps you access quickly to the resources you use 
frequently. 

Creating a new group 

1 . Select the [Window > Resource Manager...] menu command. 

2. Select a tab where that you want to make a new group. 

3. A list of categories is shown in the left. 

4. Select New Group in the Menu of the Resource Manager. 















New Folder 






Delete 








Rename... 






Import File... 






Mew Color... 






Refiesh 








Make Thumbnail 






Convert Theme 






Zip... 








Unzip... 








Unzip Gioup... 






Menu ► 











5. A new group 'newgroupl ' will be made. The sequence number will increase as you make multiple 
resource groups. 

Making a new folder 

1 . Select the [Window > Resource Manager...] menu command. 

2. Select a tab where that you want to make a new folder. 

3. A list of categories is shown in the left. Select a folder under which that you want to make a new 
folder. 

4. Select New Folder in the Menu of the Resource Manager. You can also use the shortcut menu of 
the category list. 
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Renaming groups or folders 

You can rename the group or folder in the category list. However, the System group can not be 
renamed. 

1. Select the [Window > Resource Manager...] menu command. 

2. Select a tab that contains the group or folder that you want to rename in the Resource Manager. 

3. Select a folder or group that you want to rename in the category list located in the left side of the 
Resource Manager 

4. Select Rename... in the Menu located in the lower left corner of the Resource Manager. You can 
also use the shortcut menu of the category list. 

5. Specify a new name in the Rename Group of Folder dialog box. In the Enter a new group or 
folder name text box, enter a new folder name which is the actual folder name which will be also 
created in the local hard drive. In the Enter a new group or folder title text box, enter a new folder 
title which will be displayed in the category list in the Resource Manager. 



Entei a new group or folder name: 
[Changes the actual folder name in Windows) 




[Changes folder title appeals in (he Resource Manager) 



6. Click OK. 



| Sample 01 




Moving/copying groups or folders 

You can move or copy resources or folders to other folders in the Resource Manager. However, 
you cannot move the entire group to other group or a folder. Sublevel folders and files are 
moved/copied along when you move/copy a folder. For example, if you copy Bars folder in 
the Clip Arts tab, Basic, Images, Patterned folders and all the clip art inside those folders are 
copied along. 

Moving or copying a folder 

1. Select the [Window> Resource Manager] menu command. 

2. In the Resource Manager, select a tab that contains the group, folder, or resource that that you 
want to copy. For example, if that you want to copy the Clip Art folder, select the Clip Arts tab. 

3. In the category list located on the left, select a group or folder that you want to copy. For example, 
select Banners folders in the Clip Arts tab. 
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Do one of the following: 

• If that you want to copy, click and drag the group or folder to the folder that you want to 
copy to. Release the mouse button when the mouse pointer changes to ^. 

• If that you want to move, drag the group or folder to the folder to want to move to while 
holding down the <Shift> key Release the mouse button when the mouse pointer 
changes to %. 



Moving or copying resources 

1. Select the [Window> Resource Manager...] menu command. 

2. In the Resource Manager, select a tab that contains the group, folder, or resource that that you 
want to copy. 

3. Select the folder in the category list located on the left side of the Resource Manager. 

4. In the preview pane, select the resource that you want to move/copy. A dotted blue border will 
show around the resource. 

5. Do one of the followings: 

• If that you want to copy, drag the resource to the folder you want to copy to. Release the 
mouse button when the mouse pointer changes to ^. 

• If that you want to move, drag the resource key to the folder to want to move to while 
holding down the <Shift> key. Release the mouse button when the mouse pointer 
changes to %.. 



System 
Q Banners 
r~l Buttons 
Navii 




Q In case you are working in the Flash Button or Smart Button tab, you can use the 
{Modify...} and {Modify As New...} shortcut menu. The Modify... command lets you 
modify the currently selected button. Click to open the Flash Button Properties/ Smart 
Button dialog box and modify the selected button. Modify As New... lets you make a 
copy of the currently selected button. Click to open the Flash Button Properties/ 
WebCanvas and modify the copy of the currently selected button. If you specify the 
button properties and click OK in the Flash Button Properties/ WebCanvas, the modified 
copy of the button will be added to the current folder. 
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Deleting a group/folder/resource 

You can delete a resource group, folder, or resource. If you delete a resource group or a folder, 
the folders and resources in the sub-level will be deleted as well. However, System Group can 
not be deleted. 

1. Select the [Window > Resource Manager...] menu command. 

2. In the Resource Manager, select a tab which contains the group, folder, or resource that that you 
want to delete. For example, if that you want to deletes a clip art resource, select the Clip Arts tab. 

3. Do one of the following: 

• Select a group/folder/resource that you want to delete and press the <Del> key You can 
also use the shortcut menu. 

• Select a group/folder/resource that you want to delete and select Delete in the Menu. 

• If you want to select multiple resources, hold down the <Ctrl> key or <Shift> key down 
while selecting. 

4. You will be asked "Do you want to delete the selected folder (or item(s))?". Click Yes to continue 
and No to cancel. 

Q To delete a group, you must select the All tab in the Resource Manager. 



Modifying the Color Set 

You can create a custom color and add it to the Color Set. 



Adding a new color 

1 . Select a folder in the category list located in the left of the Resource Manager. 

2. Select New Color using the Menu button or the shortcut menu. 



3. 
4. 




In the Color Picker dialog box, specify a new color and click OK. 
New color is added in the preview pane. 
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Inserting a remark 

1 . Select a color in the preview pane. 

2. Click the Remark cell. Click once more and the Remark cell becomes editable. 

3. Enter a brief remark of the color. 

Modifying a color 

1 . Select a color that you want to modify in the preview pane. 

2. Select Modify in the shortcut menu. 

3. Select a new color in the Color Picker dialog box and click OK. 

4. New color will replace the previous one. 

Deleting a color 

1 . Select a color in the preview pane. 

2. Select Delete in the shortcut menu. 

3. You will be asked for confirmation with a message 'Do you want to delete the selected item(s)?'. 

4. Click Yes. 



The Resource Manager | 39 



Sharing Resources 



Zipping a resource group 

When you work in a team, you may need to send and receive the resources. You can zip the 
resource group and send it to your coworkers. 



Zipping resource group 

1. Select the [Window > Resource Manager...] menu command. 

2. Select a resource group that that you want to zip and send to others. For example, if that you want 
to send the Smart Button banners, select the Banners folder in the Smart Buttons tab. 

Select Zip... in the Menu of the Resource Manager. You can also select from the shortcut menu of 
the resource group. 



3. 
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4. In the Save As dialog box, specify the folder and the file name, and click OK. 



Unzipping a resource group 

When you work in a team, you may need to send and receive the resources. Unzip the 
resource group that you have received in a Zip file format. 

Unzipping a resource group 

1. Select the [Window > Resource Manager...] menu command. 

2. Select Unzip... in the Menu of the Resource Manager, or in the shortcut menu after selecting a 
resource group in the category list. 

3. Select the zipped file that you received in the Open dialog box. 

4. Click Open, and the resource group will be installed automatically. 
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Chapter 4 

The Site Wizard 

Site Wizard and Template 
Using the Site Wizard 



Use the Site Wizard to create an entire site from a template 
and your choice of over 200 pre-designed themes. 



Site Wizard and Template 



The Site Wizard 

Rather than building a Web site from scratch, you can use the Site Wizard to create an 
entire site from a template. You can build the entire Web site manually, of course, but 
beginners may find it much easier to use the Site Wizard to design a Web site. You can 
create the basic form of a Web site by simply following the steps provided in the Site 
Wizard. First, choose a template, modify its structure, and apply a theme to the Web site. 
Then you will have the foundation of your new Web site, which leaves only the task of 
adding content to each document within it. 

You can modify the structure that was made when you chose the template. In addition, 
the Site Wizard lets you select a theme, which is a ready-made set of design elements such 
as buttons, banners, background images, and other page elements that gives every page 
of your new site a consistent look. 

When you build a Web site using the Site Wizard, a navigation bar is automatically 
created. The navigation bar is updated automatically as you change the structure of the 
Web site. 

Template 

A template is an outline for a Web site. The template itself is already a Web site, with its 
own structure and documents. You can customize the template by modifying its structure, 
and adding or deleting documents. Then you can apply a theme, and add content. Select 
one from among the various templates Namo WebEditor provides, and modify as you 
choose. 



42 | Chapter 4 



Using the Site Wizard 



Selecting a site template 

Selecting a template is the first step in building a Web site using the Site Wizard. Select a 
template that best suits your Web site goals. 

1. Select the [File > Site > Site Wizard...] menu command to open the Site Wizard. 

2. Select a template in Template of the Template tab. 

3. Choose a template from this list. As you click each template, the pages available in that template 
are listed in the Structure list box in the middle of the window, and a preview of the template's 
index page appears in the Preview pane on the right side of the window. 

4. Click Next. 
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Modifying the Site Structure 



Adding a new document 

You can modify the Web site structure in the Structure tab of the Site Wizard, and Web 
documents can be added to your site. 

1 . Open the Site Wizard and choose a template for the Web site. 

2. Select a Web document in the Structure list box of the Structure tab. The new Web document will 
be added in the sub-level of the Web document you have selected. 

3. Click New.... 

4. Select the Document folder in the Components tab of the Resource Manager. 

5. Select a template in the preview pane on the right and click OK. 

6. When the new document is added in the Structure, enter a name for the new document and press 
<Enter>. 

Renaming Web documents 

You can rename any Web document of the Web site. 

1 . Open the Site Wizard and choose a template for the Web site. 

2. Select the Web document whose name that you want to change in Structure of the Structure tab. 

3. Click Rename. 

4. Enter a new name, and press <Enter>. 
Moving a Web document 

You can modify the structure of the Web site by moving Web documents in the Site. 

1 . Open the Site Wizard and choose a template for the Web site. Click Next. 

2. Select a Web document in Structure of the Structure tab. 

3. Drag and drop the selected document to where that you want to exist. If the document you have 
selected includes other documents in its sub-level, those documents will also be moved. 

4. Click Move Up or Move Down to move the selected document in the same level. 

5. Click Promote or Demote to move the selected document to a different level. 
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Deleting Web documents 

You can remove a document from the site if it's no longer useful. 

1 . Open the Site Wizard and choose a template for the Web site. Click Next. 

2. Select a Web document in Structure of the Structure tab. 

3. Click Remove. 

Copying Web documents 

You can copy a Web document and paste it anywhere in the site. 

1 . Open the Site Wizard and choose a template for the Web site. Click Next. 

2. Select the Web document that you want to copy in Structure of the Structure tab. 

3. Drag and drop the selected document to where that you want it to be copied, while holding down 
the <Ctrl> key. 
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Selecting a theme 

Select a theme to be applied to the entire Web site. 

1 . Open the Site Wizard. 

2. Choose a template for the Web site in the Template tab, and modify the structure in the Structure 
tab. Click Next. 

3. Select a theme group in Themes of the Theme tab. Click Next. 

4. Select the theme you want. Click Enlarge to select the theme in the Resource Manager where 
you can have a larger view of the themes. Once a suitable theme is found, click OK in the 
Resource Manager. 

5. Click Next. 
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Entering Web Site Information 

Enter basic information for your new site, such as your name, your email address, and 
copyright information. This information will be used in various places in the new Web site. 

1 . Open the Site Wizard and choose a template for the Web site. 

2. Specify the structure and theme of the Web site in the Structure tab and Theme tab, respectively. 

3. In the Information tab, enter Title, Author, E-mail, and Copyright information. 

4. Choose a folder on your hard drive in which to store your new site in Enter a location for the new 
site. Instead of typing a directory path into the text box, you can click Browse... and select an 
existing folder in the Browse for Folder dialog box. 

5. Click OK. 
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Setting the publish information 

Set information for Web site publishing. 

1 . Open the Site Wizard and choose a template for the Web site. 

2. Specify the structure, theme, and information of the Web site. 

3. In the Publish tab, select a Web server in the Remote Sites list and click Modify.. ..If that you want 
to add a new server, click New.... 

4. In the Remote Site dialog box, enter your ISP information and user information. 

• When modifying an existing Web server: Enter User name and Password, and modify the 
'User ID' of the URL in the HTTP Information. 

• When adding a new Web server: Enter Site Name and Host name, as well as User name 
and Password. Inquire with your ISP for the Web server information. 

5. Click OK. 

6. Click Finish. 
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Q Passive Mode: If the Web server has a firewall, it is sometimes required to select 
Passive Mode to access the Web server. This options is selected by default. 

H You can specify, or change the publishing information later in the Site Manager. 
Leave the publish information unspecified if you don't have a Web server to publish to. 
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Chapter 5 

Themes 

What is a Theme? 
Applying a Theme 
Inserting Theme Objects 
Editing Theme Objects 
Applying Styles 
Editing Theme Properties 

A theme is a pre-made design that you can apply to 
all or some of the documents in a Web site. 



What is a Theme? 



What is a Theme? 

A theme is a pre-made design that you can apply to all or some of the documents in a 
Web site. 

Each of the components in a theme is designed to match the other components, giving the 
documents to which the theme is applied a pleasing, consistent look. More than 200 
themes are sorted in 12 categories such as Abstract, Arts, Business Classic, 
Business_Modem, Custom, Exotic, Home and Kids, Interests, Science, Seasons, Theme, 
and Zero. Browse the sublevel of the categories to select a specific theme. 

By applying a theme, you can decorate the Web site very easily. You can also edit themes 
by modifying the theme components. 

What are Theme Components? 

A theme is basically a collection of items, such as buttons, colors, and paragraph styles, 
that give a consistent look to the documents to which the theme is applied. These items, 
which collectively constitute themes, are called theme components, and they can be 
classified by which objects they affect. 

Text 

Theme components in this category affect the look of texts in the document. 
Normal paragraph style 

This is the style applied to normal paragraphs. To apply this style, simply select Normal in the 
HTML Style menu in the Formatting Toolbar. (This style applies to paragraphs that use the 
standard HTML paragraph tag, <P>.) 

Heading 1 & Heading 2 styles 

These styles are applied to Heading 1 and Heading 2 paragraphs. To apply either of these styles, 
select Heading 1 or Heading 2 in the HTML Style menu on the Formatting Toolbar. (These styles 
apply to paragraphs that use the standard HTML heading tags, <H1> and <H2>.) 

List styles: Parent list & Child list 

These styles are applied to paragraphs that are items in a list. Unlike the normal paragraph and 
heading styles, the list styles are not associated with any HTML style. There are two list styles: 
namo-list is for top-level list items, and namo-sublist is for second-level list items. To apply either 
of these styles, select one from the CSS Style menu in the Formatting Toolbar. 

Q Applying one of these list styles does not automatically put a bullet in front of the 
paragraph. Rather, these list styles are meant to be used in conjunction with bullet theme 
components, described below in Others. 
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Link 



Theme components in this category affect the properties of hyperlinks in the document. 

Normal text color 

The default color of text in the document. 

Hyperlink color 

The color of normal (unvisited and inactive) links. 
Visited link color 

The color of links that have been used at least once by the site visitor. 
Active link color 

The color of links that are currently active. (When a site visitor tabs to a link, it comes "active", 
meaning that the link will be followed if the site visitor presses the <Enter> key.) 

Dynamic components 

These are components that change automatically when you make a change to the 
structure of the site. They are automatically inserted by the Site Wizard when you create 
a project, but you can insert additional dynamic components later anywhere in a 
document. There are two kinds of dynamic components, described below. 

Banners 

The banner is an image with text that is inserted at the top of each document created by the Site 
Wizard. The text on the banner changes automatically when you change the Navigation title of 
the document. To insert a new banner, use the [Insert > Site Element > Banner...] menu 
command. 

Navigation bars 

A navigation bar is a set of buttons or text links that can be used to navigate to other documents in 
the site. The Site Wizard inserts at least one navigation bar in each document that it creates. The 
labels on the buttons in a navigation bar (or the words in the text links of a navigation bar) change 
automatically when you change the structure of the site, change the Navigation titles of the target 
documents, or set the navigation bar to link to a different set of documents. Navigation bars can 
be either horizontal or vertical. Each theme includes a different button style for each of the three 
possible states of a navigation bar button: normal, highlighted, and inactive. Each of these comes 
in different flavors for horizontal and vertical navigation bars, for a total of six different button 
styles.To insert a new navigation bar, use the [Insert > Site Element > Navigation Bar...] menu 
command. 
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Theme objects 

Theme components in this category can be inserted additionally anywhere in Web 
documents. Theme objects include bullets, labels, buttons, and horizontal bar. To insert 
any of these components in the current document, use the [Insert > Site Element > Theme 
Objects...] menu command, then select the component that you want to insert in the Insert 
Theme Object dialog box. 

Bullets 

Small images that can be used as bullets. 
Labels 

Small images that contain labels such as 'New', 'Cool', and 'Hot'. 
Horizontal bar 

An image of a horizontally long bar that can be used as a separator. 
Navigation buttons 

Small images that can be used as navigation buttons, such as 'Home', Back', 'Next' buttons. 
Others 

You can also specify the background color of the document and table properties. 
Background 

You can specify the background color of the document. 
Table 

You can specify the colors of borders, and background color of the header cell. 
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Applying a Theme 



You can apply a theme either to the entire site or to the current document. 

1 . Select the [Format > Theme...] menu command. 

2. Select a theme group in the Themes tab of the Resource Manager. 

3. Select a theme. You can view a larger preview of a theme on the right. You can enlarge the dialog 
box by clicking and dragging one of its edges or corners. 

4. Click OK. 

5. In the Apply Theme to dialog box, select on of the following: 

• All files in the site 

Applies the selected theme to the entire site. This radio button is enabled only when the 
site is open. 

• Current file and its children 

Applies the selected theme to the current file and its sublevel documents. This radio 
button is enabled only when the current document is included in the navigation tree of the 
site. 

• All open files 

Applies the selected theme to all the files that are currently open. 

• Current file 

Applies the selected theme only to the current document. 

6. Click OK. 

7. The theme will be applied. If there was an existing theme, it will be replaced with the newly 
selected theme. 

H When you apply a theme to a document, you can not turn it back with the <Ctrl + Z> 
command. While you can change the theme by replacing an existing one with a new one, 
removing a theme will require you to edit HTML sources in the HTML window manually. 
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Inserting Theme Objects 



Inserting banners 

A banner is a text or an image that shows the title of the document. You can insert banners 
after applying a theme. Or, like with the navigation bar, you can insert a banner to documents 
even if no theme is applied as long as the document is included in site. 

1 . Place the cursor where that you want to insert a banner. 

2. Select the [Insert > Site Element > Banner...] menu command. 

3. A banner will be inserted. 

13 The text label on a banner is always the navigation title of the document. If that you 
want to add a banner that has some other label of your own choosing, use a Smart 
Button instead. 

Inserting theme objects 

There are several other types of theme components in addition to navigation bars and banners. 
These include two kinds of bullets; three small icons with the words "Cool", "Hot", and 
"New"; and a graphical horizontal line. You can not insert theme objects if no theme is applied 
to the document. 

1. Select the [Insert > Site Element > Theme Objects...] menu command. 

2. Select a theme object in the Insert Theme Object dialog box. 

3. In the Save in text box, specify the folder to save the theme object in. Click Browse... to browse 
the folder in which that you want to save the theme object. 

4. Click OK. The selected theme object will be inserted. 

Q If you insert a theme object and save the document, the Copy Resource File dialog 
box will appear. Specify the folder and click OK. A message The following files already 
exist. Do you want to overwrite them?' will appear. Click OK to overwrite. If you don't 
save the theme object in the Copy Resource File dialog box, it will remain to have the 
absolute path, which may cause the theme object not displayed properly when you 
publish the site. 

Inserting a navigation tree 

After applying a theme, insert a navigation tree. You can insert a navigation tree even if a 
theme is not applied as long as the document is included in the site. 

1. Select the [Insert >Site Element > Navigation Tree...] menu command. 

2. In the Navigation Tree Properties dialog box, specify the level to start the tree. The navigation 
tree will display the selected level and its sublevels. 

3. Specify the Text properties. 

4. Specify the Collapsed and Expanded bullets in the Bullet. 

5. Specify the target frame from the Target drop-down menu under Frame. 
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6. Click OK. 



Navigation Tiee Properties 




Inserting a navigation bar 

After applying a theme, you can insert a navigation bar made in either texts or buttons. You 
can insert a navigation bar even if no theme is applied as long as the document is included in 
the site. 

1 . Select the [Insert >Site Element > Navigation Bar...] menu command. 

2. In the Navigation Bar Properties dialog box, select the Navigation bar type. 

3. Select the Orientation of the navigation bar. 

4. Select the Type. Click jTjj and select a Smart Button in the Smart Buttons tab of the Resource 
Manager to use as the navigation bar button. 

5. Click OK. 

Q Strictly speaking, a Smart Button is not a theme component, even though you use the 
[Insert >Site Element > Navigation Bar...] menu command to add one in the Navigation 
Bar Properties dialog box. Unlike true theme components, which can only be added to 
documents that use a theme, Smart Buttons can be added to any document. 
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Editing Theme Objects 

You can edit theme objects in the preview pane of the Resource Manager. 

1 . Select the [Format > Theme...] menu command. 

2. Select a theme in the Themes tab of the Resource Manager. 

3. A rectangular boundary will appear as you place the mouse pointer over a theme object. 

4. Double-click the theme object that you want to modify. 

5. WebCanvas is executed. Edit the theme object in WebCanvas. 

6. After editing the object, do one of the followings to save the modified theme object. 

• Select the [File > Save] menu command in WebCanvs. 

• Close the current document or exit WebCanvas. When the message "Do you want to 
save changes to the current Smart Button?" appears, click Yes. 

7. The modified theme object will appear in the preview pane of the Resource Manager. 
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Applying Styles 



Basic HTML styles and CSS styles are applied to the texts of themes. 'Heading 1' and 
'Heading 2' are for HTML styles, and 'namo-list' and 'namo-sublist' are for CSS Styles. These 
styles can be applied only to documents that have themes. 

Applying paragraph styles 

1 . Place the cursor in the paragraph where that you want to apply paragraph styles. 

2. Select the HTML Style drop-down menu on the Formatting Toolbar. 

3. Select 'Heading 1' or 'Heading 2' from the drop-down menu. 
Normal 



Heading 1 



Heading 2 
Heading 3 
Heading 4 
Heading 5 
Heading 6 
Preformatted text 
Address 
Comment name 
Comment 
Bulleted list 
Numbered list 



Applying text styles 

1 . Place the cursor to the paragraph where that you want to apply text style. 

2. Select the CSS Style drop-down menu on the Formatting Toolbar. 

3. Select 'namo-list' or 'namo-sublist' from the menu. 

D ef ault style 



namo-list 



namo-sublist 
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Editing Theme Properties 

You can modify properties of themes in the preview pane of the Resource Manager. 

1 . Select the [Format > Theme...] menu command. 

2. Select a theme in the Themes tab of the Resource Manager. 

3. After selecting a theme, right-click anywhere inside the preview pane of the Resource Manager, 
and select {Theme Properties...} in the shortcut menu. 

4. Specify the Text, Link, Heading and List, Table properties in the Theme Properties dialog box. 
Under Heading and List, the drop-down menu next to the color box is used to specify the font size 
in pixels. 

5. Click Apply. 

6. The modification will be applied to the theme in the preview pane of the Resource Manager. 
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Chapter 6 

Sites and the Site Manager 



Sites and Site Wizard Overview 
Creating a Site 
Site Management 
Managing the Site Structure 
Using the Report Tab 



A Site is a managing unit for Web site building which consists of Web documents, 
image files, and other objects that collectively constitute a Web site. A Site enables you 

to manage all these objects as members of a single group. 



Sites and the Site Wizard Overview 



What is a Site? 

A Site is a managing unit for Web site building, which consists of Web documents, image 
files, and other objects that collectively constitute a Web site. A Site enables you to 
manage all these objects as members of a single group. 

You probably do not need much site management when building a small site with only 
few Web documents. However, in larger sites, you have to logically manage the structure, 
links, navigation bar, theme and many more elements. 

Namo WebEditor helps you manage the site easily with the Site Manager. Followings are 
some of the basic operations that the Site Manager can be conveniently used for. 

Site structure designing 

You can check and modify the structure of the site easily by dragging. 
Link verification 

Performs link verification to find broken links. 
Easy Publishing 

You can publish a selective group of files, as well as publishing the entire site. 
Intelligent file management 

When you change the location of files, the Site Manager automatically updates the hyperlinks, 
leaving you free from additional manual chores. 

Quick information update 

You can apply themes to the entire Web site at once. Thus, you can change the appearance of 
the site with a few clicks at any time. 

Navigation bar 

Creates a navigation bar for the site automatically 
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Site Manager Overview 



The Site Manager enables you to manage various aspects of the site in a single window. 
When you create a site with the Site Wizard, the Site Manager opens automatically. The 
Site Manager covers everything from site creation to publishing, including designing, as 
well as file management, link verification and many other development tasks. 

The Site Manager consists of three tabs: the Site tab, Report tab, and Publish tab. 

Site tab 

The Site tab has two windows: the Local window and the Navigation window. In the Local window, 
you manage files by adding, deleting, modifying them. In the Navigation window, you manage the 
logical structure of the site. It displays the site structure in a tree format that also contains basic 
information for the navigation bar. 

Report tab 

The Report tab shows detailed information of the components. It sorts the files by their types and 
checks whether there are any broken links or improper resources, such as orphan files. 

Publish tab 

The Publish tab helps in publishing files to the remote site. You can easily upload files without an 
extra FTP program. 

Q Deselect the [View > Tab] menu command to make the tabs invisible. In this case, 
use the <Ctrl + Tab> key or <Ctrl + Shift + Tab> key to move from one tab to another. 
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Creating a Site 



Creating a new site 

You can create a site that you can build and manage your Web site easily. Enter a name for the 
site and specify the site folder. 

1 . Select the [File > Site > New Site...] menu command. 

2. In the Create New Site dialog box, enter site title, name, and site location. 

3. Click OK. 

4. If the specified folder does not exist, you will be asked whether to create a new folder. Click OK. 

5. A new site will be created, and the Site Manager will open. 

Q Open the site you have recently worked with using the [File > Recent Sites] menu 
command. Namo WebEditor memorizes 10 recently opened sites. Top listed is the most 
recently opened site. 

Creating a site with existing files 

You can create a site using existing files. Or you can include existing files when you make a 
new site. 

1. Select the [File > Site > New Site...] menu command. 

2. Specify the site title, name, location in the Create New Site dialog box. Select the top folder where 
the existing files are located. 

3. Click OK. 

4. A message "Following files have been added to the site." will appear. Click OK. 

5. The Site Manager opens with the existing files included in the site. 

Saving a site 

You can save the site you are currently editing in the Site Manager window. 

1. Select the [Site > Save] menu command in the Site Manager, or click Save Site [![] on the 
toolbar in the Site Manager. 

2. Alternatively, you can use the [File > Site > Save Site] menu command in the main window. 
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Opening a site 

You can open an existing site. 

Selecting in the Open dialog box 

1. Select the [File > Site > Open Site...] menu command. 

2. Select a site (*.wej, *.spj) you want to open in the Open dialog box. 

3. Click Open. 

4. The selected site will open, and the Site Manager will appear as well. 

Selecting from the recently opened sites 

1 . Select the [File > Recent Sites] menu command. 

2. Select a site from the recently opened site list. 

3. The selected site will open, and the Site Manager will appear as well. 

Q * wej, *.spj are the file extensions of Namo WebEditor's Site files. 

Closing a site 

You can close the site you are currently working with when you want to finish or pause the 
site creation. 

1. Select the [Files > Site > Close Site] menu command, or select the [Site >Close] menu command 
in the Site Manager. 

2. You will be asked "Do you want to close the site '**•?". Click Yes if you want to close the site. If 
you do not want to close the site, click Cancel. 

3. If you haven't saved the modification you have made, you will be asked "Save changes to the site 
■**'?". 

4. Select one of the followings. 

• Yes - Saves the modifications and closes the site. 

• No - Closes the site without saving the modifications. The modification you have made 
will not be saved. You will lose the information that was not saved. 

• Cancel - Cancels the site closing. Select this if you're not sure whether you have saved 
the files. 
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Site Management 



Adding a new document to the site 

Once you create a site, you can add new documents to the site in Site tab of the Site Manager. 

1 . Open the Site Manager by opening a site and select the Site tab. 

• In the Local window: Select a file or a folder which that you want to add a document to. 

• In the Navigation window: Select a file which that you want to add a document to. 

2. Select New Document \W\ on the toolbar, or select {New > Document...} in the shortcut menu. 

3. Select a document type in the Document folder in the Components tab of the Resource Manager. 

4. Click OK and a new document is added to the site. 

Q You cannot add a document under a file in the Local window. 

Adding a new folder to the site 

You can add a new folder to the site in the Local file list in the Site tab. You can insert a folder 
under a site or under a specific folder in a site. 

1 . Open Site Manager by opening a site and select the Site tab. 

2. In the Local window in the left side, select the site name or a specific folder in which the new 
folder is to be inserted 

3. Select New Folder [la] on the toolbar of the Site Manager, or select {New > Folder} in the 
shortcut menu. 

4. A new folder is inserted. 

Deleting files in the site 

You can remove files from the Site Manager and from the windows folder as well. 

1 . Open the Site Manager by opening a site and select the Site tab. 

2. Select file(s) that you want to delete in the Local window or the Navigation window. 

3. Select the [File > Delete] menu command, or click Delete [x] in the toolbar. You can also use the 
<Delete> key. 

4. A message "This operation will remove the selected files completely from the site manager 
and from the folders as well. If you want to restore them after this operation, restore from the 
Windows Recycle bin. Do you want to continue?" will appear. 

5. Click Yes to continue, and No to cancel. 
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Changing the name of the site 

You can change the name of the exiting site at any time. 

1 . Open the Site Manager by opening a site. 

2. Select the [Site > Properties...] menu command in the Site Manager. 

3. Enter a name in the Title text box in the Properties dialog box. You can also change the Author of 

the site. 

4. Click OK. 

Q You can change the name by right-clicking the site name and selecting {Properties...} 
in the shortcut menu in the Local window of the Site tab or Publish tab. 

Cleaning up the theme files 

If you apply various themes to documents, to which a set of themes have already been applied, 
there may be some theme files used previously that are no longer necessary. Those could be 
bullets and horizontal lines from the previous theme you have applied. Rather than searching 
removing such files manually, you can delete them using the Clean Up Theme Files feature. 

1 . Open the Site Manager by opening a site. 

2. Select the [View > Clean Up Theme Files] menu command in the Site Manager. 

3. A message box will appear for confirmation. Click OK, and the unnecessary theme files are 
removed. You can check the result by selecting the document file and viewing it with View with 
Internet Explorer/Netscape. 

Refreshing the site 

Modifications you've made in the Site Manager may not be applied to other parts of the Site 
Manager instantly. You can update the Site Manager with the latest information so that all the 
windows have the same, latest information about the site. 

1 . Open the Site Manager by opening a site. 

2. Select the Site tab or Publish tab. 

3. Select the [View > Refresh] menu command, or press <F5> key 

4. The information of the local and remote site will be updated and both sides will have the same and 
latest information on the site. 
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Managing the Site Structure 



Showing/hiding Site Manager controls 

You can choose whether to show or hide the toolbar, window labels, tabs, or status bar in the 
Site Manager. Decide whether to use each control in the menu so that you can work with the 
site in the environment more friendly to you. 

1 . Open the Site Manager by opening a site. 

2. Select one from the following in the Site Manager menu: 

• Toolbar: Select the [View > Toolbar] menu command. It will show or hide the toolbars 
attached to the window. 

• Label: Select the [View > Label] menu command. It will show or hide the label such as 
Local, Remote, or Navigation. 

• Tab: Select the [View > Tab] menu command. It will show or hide the Site, Report, and 
Publish tabs. 

• Status bar: Select the [View > Status bar] menu command. It will show or hide the status 
bars which describes the function of menus or buttons. 

Viewing with Internet Explorer/Netscape 

Web pages may be displayed somewhat differently depending on the type of Web browser you 
use. You can preview the documents with Internet Explorer and Netscape before you publish 
documents in the Site Manager. This kind of task is essential when you want to equalize the 
displays in both browsers. 

1 . Open the Site Manager by opening a site. 

2. Select the document to preview. 

• When using the Site tab: Select a document from either the Local window or the 
Navigation window. 

• When using the Publish tab: Select a document from the Local window. 

3. Select the [View > View with Internet Explorer] or [View > View with Netscape] menu command. 
Alternatively, select {View with Internet Explorer} or {View > View with Netscape} in the shortcut 
menu. 

4. The selected document will be displayed in the selected browser. 

Q You can use shortcut key for preview. Press <F11> for Internet Explorer and <F12> 
for Netscape. 
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Updating navigation bars 

You must update navigation bars after you've made changes to the site structure by adding, 
changing, and deleting documents. 

1 . Open the Site Manager by opening a site. 

2. Select the [View > Update Navigation Bars] menu command. 

3. A dialog box will show a message 'Updating navigation bars...' while update is under way. 

4. The navigation bar is updated. 

Q To get the detailed information on modifying the site structure using the navigation 
tree, refer to Adding document to Navigation tree or Removing documents from the 
navigation tree. 

Expanding/Collapsing the file tree nodes 

When there are a lot of files displayed in the Local window, you can control which files and 
folders to be displayed or hidden by expanding and collapsing the file tree nodes. Using this 
function, you can hide the documents and folders which are not directly related to the current 
task. 

1 . Open the Site Manager by opening a site and select the Site tab. 

2. Select collapse and expand marks ( H / □ ) in the Local window of the Site tab. 

3. Click EE to expand the node. The Local window shows all the folders and files under a specific 
folder. The clicked H turns into □. 

4. Click □ to collapse the node. The Local window hides all the folders and files under a specific 
folder. The clicked □ turns into EB 

Maximizing the window 

If there are two windows in one tab, you can choose to view one of the windows in the 
maximized size. 

1 . Open the Site Manager by opening a site. 

2. Select Local or Navigation window in the Site tab or select Local or Remote window in the 
Publish tab. If a window is selected, the title bar turns into dark gray. 

3. Select the [View > Maximize] menu command, or click Maximize 0 on the right of the each 
window title. 

4. The selected window will be maximized and the counterpart window disappears. 

E3 Click Minimize [▼] to restore the original size, or deselect Maximize menu command 
by selecting [View > Maximize] once again. 

Moving/Copying documents 

You can easily move documents in the Navigation window in the Site tab. You can also copy 
and paste documents to another position. 
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Moving documents 

1 . Open the Site Manager by opening a site and select the Site tab. 

2. Click to select a document in the Navigation window and drag it to where you want to locate it. To 
select the multiple documents, select the documents while pressing down the <Ctrl> key. 

3. When the mouse pointer turns into a small gray rectangle, release the mouse button. 

4. The document will be moved. 

Copying documents 

1. Open the Site Manager by opening a site and select the Site tab. 

2. Select a document to copy in the Navigation window. To select the multiple documents, select the 
documents while pressing down the <Ctrl> key. 

3. Drag the document while holding down the <Ctrl> key. 

4. When the mouse pointer turns into a small gray rectangle, release the button where you want to 
copy the document. 

5. The document will be copied. 

H You can also use the <Ctrl + C> key or select the [Edit > Copy] menu command to 
copy the document(s). Select a document under which you want to paste the file and 
press the <Ctrl + V> key or select the [Edit > Paste] menu command. 

Q You can also drag a document file in the Local file list under or besides a document in 
the navigation tree. Select the documents you want to add to the navigation tree in the 
Local file list. Drag the selected document(s) under or besides the blue rectangle, 
representing a document, in the navigation tree. When the mouse pointer turns into a 
small gray rectangle, let go of your mouse button. The document is added to the 
navigation tree. 

Adding documents to the navigation tree 

Not all files in the site are shown in the Navigation window. You should add a document to the 
navigation to display the files of the Local file list in the Navigation Tree preview located on 
the right. 

1 . Open Site Manager by opening a site and select the Site tab. 

2. In the Navigation window, select a document which that you want to add a document to. 

3. Select the [Edit > Insert to Navigation...] menu command, or select {Insert to Navigation} in the 
shortcut menu. 

4. Select the document(s) that you want to insert in the Select File dialog box. You can select 
multiple document files by selecting the file while holding down <Ctrl> key. 

5. Click OK. 

6. Selected documents will be added to the Navigation window. 

Q You can easily drag a document file in the Local file list under or beside a document 
in the Navigation Tree. Select the documents you want to add to the Navigation Tree in 
the Local file list. Drag the selected document(s) under or beside the blue rectangle in 
the Navigation Tree. When the mouse pointer turns into a small gray rectangle, release 
the mouse button. The document is added to the Navigation Tree. 
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Adding a section to the site 

A section is a set of related, template-based Web documents that you can add to any site in 
Namo WebEditor. Each section has its own predefined design elements, such as backgrounds, 
banners, bullets, etc., which are shared by all the pages in the section. You can add these 
sections only in the Navigation window. 

1 . Open the Site Manager by opening a site and select the Site tab. 

2. In the Navigation window, select a document where a section should be added. A section is to be 
inserted into the sub-level of the document. 

3. Select the [Edit > Insert Section...] menu command or select {Insert Section...} from the shortcut 
menu. 

4. In the Insert Section dialog box, select a section in Templates and click OK. You can see the 
preview of the documents selected in Structure in the Preview area on the right. 

5. The section is inserted under the document you have selected in the Navigation window. 

Removing documents from the navigation tree 

You can remove a document from the Navigation Tree. The document will be removed only 
from the Navigation Tree, not from the folder. 

1 . Open the Site Manager by opening a site and select the Site tab. 

2. Select a document that you want to remove in the Navigation window on the right side. 

3. Select {Remove from Navigation Tree} in the shortcut menu, or click Remove from Navigation 
Tree [IT] on the toolbar of the Site Manager. You can select the [Edit > Remove from Navigation 
Tree] menu command instead. 

4. The selected document will be removed from the Navigation Tree. 

H Selecting {Remove from Navigation Tree} in the shortcut menu is different from 
selecting a document in the Navigation Tree and pressing the <Del> key. While the 
former removes the selected document just from the Navigation Tree, not physically from 
the folder, the latter will physically remove the selected document from the disk. 

Inserting an external URL 

You can insert external URL into a Web site. External URLs are not documents included in 
the site, but are imported from outside to usually perform functions such as Boards and 
chatting board. 

1 . Open the Site Manager by opening a site and select the Site tab. 

2. In the Navigation window, select the document under which that you want to add an external 
URL. 

3. Select the [File > New > URL...] menu command, or click New URL on the toolbar. 

4. In the New URL dialog box, enter URL and Navigation title, then click OK. 

5. The URL will be inserted to the Navigation Tree in the Navigation window. 

H You can see the New URL (W] icon in the inserted external document. This icon 
represents that the document is an external document, not a document constituting a site 
in the hard drive. 
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Using the Report Tab 



Link verification 

It is recommended to verify links before publishing the site. You can verify and correct the 
links in the Report tab. Link verification lets you check which files are not properly linked to 
any of the document in the site and modify the Improper Resources. 

1 . Open the Site Manager and select the Report tab. 

2. Select Broken links under Hyperlinks in the Filter list window on the left. When you first use the 
filter, a message asking, "Hyperlinks have not been checked. Check hyperlinks now?" appears. 
Click OK. 

3. A list of Broken links will be displayed in the File list window on the right. 

4. Double-click a file in the File list window. The selected file will open in the Edit window, and the 
cursor will be placed where the broken link is. 

5. Check and modify the broken link. 

H Select Orphan under Improper resources in the Filter list window on the left to check 
for the orphan files, which are not linked to any of the files in the site. Check whether you 
need the orphan files, because orphan files cannot be accessed by your site visitors. If 
you need them, set the proper links to the documents. If not, you can safely delete them 
from the site. 

Sorting files 

In the Report tab, you can sort files in the site into HTML documents, Image files, CSS files, 
Flash files, URL, and Other files. 

1 . Open the Site Manager and select the Report tab. 

2. In the Filter list window on the left side, select one from HTML document, Image files, CSS files, 
Flash files, URL, and Other files. 

3. Files of the selected type will be listed in the File list window on the right. Name, Size, Modified, 
State, Type of the files are shown. 

4. Click each title of the tabs to sort the files according to the selected tab. 

Q The State column shows the status of a document. In case you have opened and are 
currently editing a document in the Edit window, 'Editing' appears in the State column of 
the document. In case you have made some modifications and have not saved them, 
'Modified' appears in the column. 
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Chapter 7 

Publishing a Site 

What is Publishing? 
Setting the Publish Information 
Publishing a Web Site 
Downloading files from the remote site 



Namo WebEditor includes a powerful set of publishingfeatures built in, 
simplifying the task of publishingyour site to the Web. 



What is Publishing? 



What is publishing? 

Once you've created a Web site and edited it to your satisfaction, you'll need to upload 
the site to a Web server. This 'uploading' of the files you've created for the Web site is 
called Publishing. To publish your Web site, you'll need an account and free disk space on 
a Web server. You can get a free account and disk space from various Internet Service 
Providers (ISPs) that offer free Web hosting services. 

Before publishing a web site 

An optional but highly recommended step before you publish is performing link 
verification through the entire site to check for bad links and other link problems. You 
can validate hyperlinks automatically in the Report tab of the Site Manager. 

Publishing with the Site Manager 

The Site Manager's Publish tab provides publishing features you can perform with a few 
clicks on the option buttons. You do not need additional FTP programs to upload or 
download files. The Publish tab is where you publish the Web site after creating and 
validating it with the help of the Site tab and the Report tab. 
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Setting the publish information 



It is important that you enter the correct publish information for successful publishing. 
Information on widely used ISPs is registered by default. 

When selecting an ISP from the list 

1. Select the [File > Publish > Remote Site Settings...] menu command. Or select the [Site > 
Publish > Remote Site Settings...] menu command in the Site Manager, if it is open. 

2. In the Remote Sites dialog box, select an ISP and click Modify.... 

3. The Remote Site Settings dialog box will appear. The Remote Site Settings dialog box is 
automatically filled out with the settings from the site that was selected in the Remote Sites dialog 
box. 

4. In the Remote Site Settings dialog box, enter your login ID for the FTP server in User name. 

5. Enter your login password in Password. 

6. Enter the HTTP Information, changing only the 'User ID' part of the URL to your ID. 

7. Click OK. 

8. Click Close in the Remote Site Settings dialog box. 
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When adding a new ISP 

1. Click New... in the Remote Sites dialog box. 

2. Enter a Site name in the Remote Site Settings dialog box. Any name that represents the remote 
site will be fine, since it will be used only to identify. 

3. Enter the address of the FTP server that is used to upload files to the Web site in Host. Do not 
include "ftp://". You have to enter the exact host name of FTP server. 

4. Enter the Port number to use when connecting to the FTP server. The default value, 21 , should 
work in most cases. 

5. Enter the path of the directory on the FTP server that stores your Web documents in Directory. 
Usually, this is 'public_html'. If you're not sure what the HTML directory is, ask your network 
administrator or ISP. 

6. Enter your login ID for the FTP server in User name. 

7. Enter your login password in Password. 

8. Select Passive mode if the server is behind a firewall or gateway requiring passive mode. If you're 
not sure, ask your network administrator or ISP. 

9. Enter the URL used to access the Web site in a browser in the URL text box under HTTP 
Information. 

10. Click OK. 

1 1 . Click Close in the Remote Sites dialog box. 
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HTTP Information 
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(Example settings of a WebEditor user who has 'namoman' as their user name.) 
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Changing the character set 

It is suggested to check whether the character set of your Web documents are properly 
specified before publishing the site. You can change the character set of multiple documents at 
once. If that you want to change the character set for each document, use the General tab of 
the Document Properties dialog box. 

1. Select the [Tools > Change Character Set...] menu command, or select the [Tools > Change 
Character Set...] menu command in the Site Manager. 

2. In the Change Character Set dialog box, select the new encoding method to apply from the 
Change Character set to drop-down menu. The Internet code associated with the selected 
character set will be displayed on the right. Select 'user-defined' to leave the character set 
unspecified. 

3. Select the documents to which the character set should be applied. Select Currently open 
documents to apply the character set to all documents that are currently open in the Edit window. 
Select Selected documents in the site to choose from a list of documents. Every Web document 
in the site is selected by default. 

4. Click OK. 
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Q The character set is specified inside the meta tag of HTML documents. Following is 
an example of the 'Unicode(UTF-8)' character set inserted as a meta tag. 

<meta http-equiv=" content-type" content="text/html; charset=utf-8"> 
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Converting file names to lowercase 

Some Web server systems distinguish lowercase letters from capital letters, causing some files 
to not properly appear when published. In such cases, convert the file names to lowercase and 
publish again. 

1. Select the [Tools > Convert Filenames to Lowercase...] menu command in the Site Manager. 

2. An alert message "This action cannot be undone. Are you sure you want to convert all the 
hyperlinks, filenames and folder names in the site '**' to lowercase?" will appear. 
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3. 



Click Yes to confirm. 



Q This action converts all the hyperlinks, folder names, and documents in the site to 
lower case. To use this command, the files should be created as a site. 
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Publishing a Web Site 



Connecting to remote site 

When the remote site setting has been made, you can connect to the remote site. 

1. Click Publish [@] on the Standard Toolbar, or press the shortcut key <F4>. You can also select 
the [File > Publish > Publish...] menu command. If the Site Manager is open, select the Publish 
tab. 

2. The Publish tab of the Site Manager appears. 

3. Select a remote site from the Remote drop-down menu in the Remote window. 

4. A list of files and folders at the remote site will be listed when connected to the remote site. 
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H The connection to the remote site f ails if the remote site information you have entered 
is incorrect. When it happens, click the [TJ button next to the Remote drop-down menu 
to open the Remote Sites dialog box and check the remote site information again. 

Publishing to a Remote Site 
Publishing all files 

When publishing your Web site for the first time, you have to publish all the files of your site 
to the Web server. 

1 . Connect to the remote site to which that you want to publish your site. 

2. Select the Local window of the Publish tab by clicking anywhere inside the Local window. 

3. Select the [Edit > Select All] menu command, or press <Ctrl + A>. 

4. Click Put on the toolbar to publish the files. 
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5. A progress bar appears, showing the publishing status as the publishing advances. 

Publishing... 
images/2G9x1 94.gif 



Stop | 

6. When publishing is over, the list of published files and folders will be shown in the Remote 
window. 

7. The message "Publishing has finished successfully." will appear. 

23 You can publish various selected groups of files. Select the [Edit > Select Open] 
menu command to publish all the files that are currently open in the Edit window. Select 
[Edit > Invert Selection] to invert the current selection. For Example, the selected files 
will be unselected, and vice versa. Select the [Edit > Select Publish Failed] menu 
command to publish the files that have failed to be published. Select [Edit > Select 
Related] menu command to publish the files that are referred in the documents, such as 
image files. 

Publishing modified files only 

Using the Publish tab of the Site Manager, you can upload only the files that have been 
modified since the last publishing. 

1 . Connect to the remote site to which that you want to publish your site. 

2. Files and folders that have been published are listed in the Remote window. 

3. Select the [Edit > Select Modified] menu command. Only the modified files will be selected. 

4. Click Put j^j on the toolbar to publish the files. 

5. A progress bar appears, showing the publishing status as the publishing advances. When 
publishing is over, the list of published files and folders will be shown in the Remote window. 

6. The message 'Publishing has finished successfully.' will appear. 

Q You can publish various selected groups of files. Select the [Edit > Select Open] 
menu command to publish all the files that are currently open in the Edit window. Select 
[Edit > Invert Selection] to invert the current selection. For Example, the selected files 
will be unselected, and vice versa. Select the [Edit > Select Publish Failed] menu 
command to publish the files that have failed to be published. Select the [Edit > Select 
Related] menu command to publish the files that are referred in the documents (image 
files, etc). 

Synchronizing the local/remote sites 

You can synchronize the files in local site to the files in the remote site or vice versa. Using 
this command, the files in both sites can be kept identical. 
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1 . Connect to the remote site to which that you want to publish your site. 

2. Select the Publish tab of the Site Manager. 

3. Select the [File > Synchronize...] menu command, or click Synchronize on the toolbar. 

4. In the Synchronize dialog box, choose your action that best suits your need; 

• Copy local site files to the remote site 

Copy local site files to the remote site. Files that are only in the local site will be published, 
and the files that are only in the remote site will be left unchanged unless you select 
Delete files that exist only on one side check box. 

• Copy remote site files to the local site 

Synchronizes the remote site to the local site. Files that are only in the remote site will be 
downloaded to the local hard drive, and the files that are only in the local site will be left 
unchanged unless you select Delete files that exist only on one side check box. 

• Copy files bi-directionally 

Synchronizes in bi-directional way. Files in only one side will be copied to the other. 

• Overwrite old files with new files 

Overwrites the old files with new files, if the same files exist in both side This option is 
selected as default. 

• Delete files that exist only on one side 

Deletes files that exist in only one side. 

5. Click OK. 
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H If you select the [Edit > Select Local] menu command before clicking Put [11] on the 
toolbar, all the files that exist only in the local hard drive will be selected. And if you select 
the [Edit > Select Remote] menu command before clicking Get [|F|, all the files that exist 
only in the remote site will be selected. After the files are selected, click Put or Get 
[@1 to synchronize the files in both sites. This menu command provides the same feature 
that the Synchronize dialog box does. 
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Opening and Saving Files on an FTP Server 



Opening files from FTP server 

You can open files located in the FTP server. 

1. Select the [File > Publish > Open FTP...] menu command. 

2. Select an FTP server from the Remote site drop-down menu in the Open FTP dialog box. If the 
server from which you want to open files is not listed in the drop-down menu, click |T7j to add a 
new server to the list in the Remote Sites dialog box. 

3. As the connection is made to the server, files and folders in the server are listed in the list box. 

4. Select the files that you want to open. 
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5. Click Open. 

Saving files to FTP server 

You can save files to the FTP server. 

1. Select the [File > Publish > Save FTP...] menu command. 

2. The Save FTP dialog box appears. 

3. The name of the file to be saved appears in Filename. 

4. Select the remote site to which that you want to save the file from the drop-down menu or click 
to open the Remote Sites dialog box. When you have specified the remote site, the 

connection to the remote site will automatically established. 

5. Click Save. The files are saved directly to the remote site. 

Q When you repeat saving a file to the FTP server immediately after having already 
saving it once, the Save FTP dialog box appears with the recent remote site information 
and the connection to the remote site is made automatically. 
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Downloading files from the remote site 



Downloading files from the remote site 

1 . Connect to the remote site. 

2. When connected, files and folders at the remote site will be shown in the Remote window. 

3. Select all files that that you want to download. 

4. Select a folder in the Local window to save the downloaded files in. 

5. Click Get [@] on the toolbar, or select the [File > Get] menu command. 

Q To select multiple files, hold down the <Ctrl> key and select each files. Hold down the 
<Shift> key and select one file, then another, to select all files between them. 

Q When you perform an upload or download of files, the updated information may not 
be shown instantly. Click Refresh [if] to view the updated information immediately. 

Deleting files at the remote site 

In the Publish tab of the Site Manager, you can delete any files located in the remote site. 

1 . Connect to the remote site. 

2. When connected, files and folders of the remote site will be listed in the Remote window. 

3. Select a file to delete. 

4. Select the [File > Delete] menu command, or click Delete \x\ on the toolbar. You can also select 
{Delete} in the shortcut menu. 

5. The message "This operation will completely remove the selected files from the remote site. 
(No Undo) Do you want continue?' appears. Click Yes and the selected file(s) will be deleted. 

Q If that you want to delete files which are only in the remote site, select the [Edit > 
Select Remote] menu command and click Delete [x] on the toolbar. 

Q You can delete multiple files from the remote site. Hold down the <Ctrl> key and 
individually select all files to be deleted. Select a file, then another, while holding down 
the <Shift> key to delete all files between. 
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Chapter 8 

Formats and Styles 

Web Documents and Styles 
Working with Formats 
Working with Styles 



With Namo WebEditor,you can exercise complete control 

over text formatting and styles. 



Web Documents and Styles 



Styles in Web documents 

Styles refer to the appearance of a document. Styles include various elements of a Web 
document such as font type, font size, font color, line height, paragraph spacing, and 
document margins, all of which determine a document's appearance and display. You can 
modify the styles of a document in two ways— using HTML tags or applying Cascading 
Style Sheet (CSS). Using CSS allows you to apply various styles to the Web documents 
by integrating various functions which are not supported by simple HTML tags. 



Application of styles to different elements of a Web document 

Styles can be divided into font style, paragraph style, and document style based on the 
type of element each style is applied to. Font styles are applied to one character or 
multiple characters, and modify the shape of the selected characters. Paragraph styles are 
applied to one paragraph or multiple paragraphs, and modify the properties of the 
selected paragraphs. A document style is applied to the entire document. So, commonly 
used document styles can be standardized and used as document templates. 



Character Formats and Paragraph Formats 
Character formats 

Character formats are applied to selected characters and can be used to edit the character 
shape. Character formats can be applied to a single character, but can expand the range of 
application according to the area you have selected. Character formats includes font type, 
font size, font color, text background color, font style (Bold, Italic, Underline, 
Strikethrough, Monospaced, Superscript, Subscript, Blinking, etc), letter spacing, word 
spacing, and so on. To change the character formats, you should first select the text to 
which you intend to apply the desired format. 

Paragraph formats 

Paragraph formats are used to edit the appearance of selected paragraph(s). They have 
one paragraph as its minimum unit of application. Paragraph formats can be applied to 
the alignment, list style, indentation, margin, and spacing of any selected paragraphs. You 
must place the cursor at the target paragraph to modify the format of a particular 
paragraph. If you want to apply a certain paragraph format to multiple paragraphs, first 
select the area then specify the paragraph format. 
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Document Styles and Templates 

A document style is style that is applied to the entire document. Multi-column documents 
are composed using tables with invisible borders. A frameset document is also one of the 
main tools used to draw a document layout. Below are the general elements constituting 
document style. 



• Text color 

• Background color 

• Document margins 

• Background images 

• Background sounds, etc. 



Document templates 

Commonly used document styles can be standardized and used as document templates. 
Namo WebEditor offers various document templates with different editing layouts such 
as 'Two column body' or 'Three column body,' as well as useful frameset document 
templates. You can shorten editing time by selecting the relevant templates in the 
Component or Document folder of the Resource Manager which opens when you select the 
[File > New...] menu command. 

Section templates 

Namo WebEditor offers section templates as well as document templates. Section refers 
to a set of documents constituting some part of your Web site, and Section Template 
refers to a customized set of commonly used sections. Usually several documents are 
gathered together as a group, making up a section. For example, the section 'mysection' is 
made up of two documents - report 1 and report2 as in the image below. 



mysection 





reportl 



report2 
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What is a Style Sheet? 

Cascading Style Sheets (CSS) is a Web standard that complements HTML by providing a 
way to specify more precise formatting information in Web documents. HTML provides 
only a few tags and properties that can be used to specify the appearance of documents, 
such as the <font> tag for specifying the font and relative size of text, and the "align" 
property for specifying the alignment of paragraphs. Furthermore, the HTML standard 
leaves the interpretation of these formatting tags and properties up to the browser, so Web 
documents using these features often appear differently in different browsers. 

To help overcome these limitations, the World Wide Web Consortium (W3C) introduced 
the Cascading Style Sheets Level 1 (CSS1) specification in 1996, followed by the 
Cascading Style Sheets Level 2 (CSS2) specification a few years later. CSS1 and CSS2 
allow for much more precise formatting of Web documents than HTML alone. Some of 
the benefits of CSS include the ability to specify the exact size of text in a variety of 
units; to specify alternate fonts when the desired font does not exist on a site visitor's 
system; to specify exact line and paragraph spacing; to specify borders around 
paragraphs, and more. CSS uses the <style> tag to specify this formatting information. 

Even better, CSS provides a way to create "styles", which are named sets of predefined 
formatting attributes. Using styles, you can apply an entire set of attributes to a paragraph 
or a selection of text by just applying a style by name. You can also define a style that is 
automatically attached to every occurrence of a particular tag, such as the <p> tag for 
paragraphs or the <li> tag for list items, so that every paragraph or list item in a 
document automatically uses the style. 

Besides providing the convenience of being able to apply an entire set of attributes in one 
stroke, the real power of styles lies in the fact that you can change the look of every part 
of a document by just changing the definition of one or more styles. 

The collection of styles used in a document is called the "style sheet". The style sheet can 
reside either inside the HTML document, or in a separate text file with the .ess file 
extension, which can be referenced by other documents. The latter option is particularly 
powerful, because you can change the look of many documents (for instance, an entire 
Web site) by just changing the style sheet. 
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Using style sheets offers you the following advantages: 

You can express different layouts which are not supported by HTML documents. 

You can control the subtle layout differences using absolute or relative length measures (pixel, cm, 
mm, inch, pica, etc). 

You can minimize the interference of the user system and let your Web document 
appear as intended. HTML documents appear differently according to the user's platform and 
the various existing browsers. However, CSS-supported documents appear the way you intend 
them to appear. 

You can modify several Web documents with ease using external style sheet files. 

Saving external CSS files lets you manage the logical structure (HTML) and the layout (CSS) of a 
Web document. 

Q For more information about Cascading Style Sheets, visit the W3C's CSS index page 

(ht tp : / /www . w3 . org/St yle/CSS). 

Using Style Sheets 

Style sheets refers to a list of styles. There are three ways to apply style sheets to your 
Web documents. 

Applying in-line styles to some parts of the document 

You can apply in-line styles by inserting style attributes in the <P> tag of the HTML code 
directly, as follows. This example implements a blue dotted border around the text, and is 
created by applying a style to the paragraph. 

<P style— 'color :blue; margin: 1; border-width : 1 ; border-color : blue; 
border-style : dotted; ">Using Styles</P> 

Embedding a style sheet between the <HEAD> and </HEAD> tags using the 
<STYLE> element 

To apply a certain style to the entire document, define your style using the <STYLE> tag 
between the <HEAD> and </HEAD> tags. The defined styles are applied to the contents 
of the <BODY>. '.yellow' has been defined as Class, and '#black' as ID in the below 
example. The styles defined as Class can be applied repeatedly to different parts of a 
document. 

<STYLE> 

P { color: blue; } 
HI { color: red; } 
H2 { color: green; } 
.yellow { color : yellow; } 
#black { color: black; } 
</STYLE> 
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Linking an external style sheet to HTML documents 



You can save styles, which are defined with <STYLE> tag, in an external style sheet. In 
this case the style sheet file has the extension '.ess' standing for cascading style sheet. For 
style attributes to be applied to Web documents, they must be linked to the CSS files. 
When the above style attributes are saved as 'mystyle.css 1 , the content of the style sheet 
file 'mystyle.css' follows as below. 

P { color: blue; } 
HI { color: red; } 
H2 { color: green; } 
.yellow { color: yellow; } 
#black { color: black; } 

Working with Styles in Namo WebEditor 

How does Namo WebEditor support Cascading Style Sheets? 

Namo WebEditor fully supports Cascading Style Sheets. CSS formatting attributes can be 
applied to paragraphs using the [Format > Paragraph Style...] menu command. The [Format 
> Style Sheet...] menu command lets you define named styles and create a link to an 
external style sheet. Once you define a named style, you can easily apply it to any 
paragraph or selection of text using the CSS Style menu on the Formatting Toolbar. In 
addition, you can apply styles to many page elements that are not paragraphs or text 
selections, such as tables, images, and form fields, by using the Style button in each 
element's properties dialog box. 

Working with styles in Namo WebEditor 

Namo WebEditor classifies styles into Paragraph Style and Internal Style based on the 
scope of style application. Paragraph Style refers to the style specified in the <P> tag as 
an in-line style. Internal Style, on the other hand, is defined by inserting the <STYLE> tag, 
along with its details between the <HEAD> and </HEAD> tags. You can work with both 
of the styles in the WYSIWYG environment using the relevant dialog box. It is also 
possible to save the Internal Style as an external style sheet file. 

A Paragraph Style has one paragraph as its minimum scope of application. You can apply 
a Paragraph Style by selecting the [Format > Paragraph Style...] menu command and 
specifying the relevant values in the Style dialog box. A Paragraph Style is applied by 
default to the paragraph where the cursor is currently located. However, you can apply a 
Paragraph Style to multiple paragraphs by selecting, in advance, the paragraphs to which 
the styles should be applied. 

An Internal Style refers to the style applied to the whole document. You can apply an 
Internal Style by selecting the [Format > Style Sheet...] menu command and specifying the 
relevant values in the Style Sheets dialog box. You can define a set of style attributes for a 
tag or define the style as Class or ID. If you define it as Class, you can apply it repeatedly 
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to selected areas of your document. The style definition in Internal Style is inserted as the 
<STYLE> tag, and its details between the <HEAD> and </HEAD> tags. To save the 
styles as an external style sheet file, choose the [Format > Style Sheet...] menu command 



• If a set of style attributes are defined for an HTML tag, the elements within the tag are 
displayed as defined by the style. 

• If you define Class, you can apply it repeatedly to selected areas of the document. 

• Saving an external style sheet file (*.css) lets you link one style sheet to multiple HTML 
files. 

H Namo WebEditor supports an in-line style using the <SPAN> tag. To apply the style 
using the <SPAN> tag, first define the Class, then select the relevant part of your 
paragraph and apply the intended style using the CSS Style drop-down menu on the 
Formatting Toolbar. 

89 Style attributes applied using the Style dialog box are overridden by attributes you 
apply to paragraphs or individual characters and words using the control on the 
Formatting Toolbar, the Character Format dialog box, and the Paragraph dialog box. 
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Working with Formats 



Character Formatting 
Changing fonts 

You can apply various kinds of atmosphere to the document by changing fonts of the 
document. 

1 . Select the text that you want to modify. 

2. Select the desired font from the Font drop-down menu on the Formatting Toolbar. 

Q You can hide the actual fonts in the font menu by unchecking Display actual fonts in 
font menu in the Edit tab in the Preferences dialog box. 

Modifying the font size 

You can modify the size of text you have selected. To modify the font size minutely, use the 
Text tab of the Style dialog box. 

1 . Select text to modify its font size. 

2. Choose the font size from the Font Size drop-down menu on the Formatting Toolbar. If a font size 
larger than 72 pt' is desired, enter the size directly. 

Q To apply various font styles to your text, select the [Format > Font...] menu command 
and click the Extended Styles tab. Click the Style... button and specify the styles you 
want in the Font tab of the Style dialog box. 

Q You can also increase or decrease the font size by selecting the [Format > Character 
> Increase Size] or [Format > Character > Decrease Size] menu command. The size 
specified by the CSS cannot be modified by these commands. 



Modifying font colors 

You can modify color of the selected text. 

1 . Select text to modify its color. 

2. Modify the color of the selected text by clicking Font Color | a -\ on the Formatting Toolbar. Colors 
other than the 216 basic colors can be applied by clicking Color Picker icon [#] and selecting the 
desired color in the Color Picker dialog box. 



H You can copy the font color of other text using the dropper £_ 
dialog box. 



in the Color Picker 
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Modifying the text background color 

You can apply background color to the selected text. 

1 . Select text to modify its background color. 

2. To modify the text background color, click Text Background Color on the Formatting 
Toolbar and choose the desired color. 

Changing text styles 

Use the Formatting Toolbar to apply commonly used character styles to the selected text. 

1 . Select text to modify its style. 

2. Modify the font style by clicking Bold [FJ, Italic [T] or Underline [n] on the Formatting Toolbar. 
To undo the modification, click the button again. 

To apply styles other than those offered on the Formatting Toolbar, use the Character Format 
dialog box by selecting the [Format > Font...] menu command. 

1 . Select text to modify its style. 

2. Select the [Format > Font...] menu command. 

3. Check the styles you want from among Bold, Italic, Underline, Strikethrough, Monospaced, 
Superscript, Subscript in the Character tab in the Character Format dialog box. 

4. Click OK. 

Specifying the letter spacing 

You can adjust the spacing between characters or words to widen or reduce it. 

1 . Select the area whose letter spacing should be changed. 

2. Select the [Format > Font...] menu command. 

3. Select the Extended Styles tab in the Character Format dialog box. 

4. Set Letter spacing and Word spacing under Spacing and click OK. 

Removing character formats 

You can remove all the character formats from text at one time. 

1 . Select text for character format removal. 

2. Click Clear Character Format \&\ on the Standard Toolbar or select the [Format > Character > 
Clear All Formats] menu command. You can also use the shortcut key <Ctrl + E>. 

Q To remove all CSS style formats from selected text, choose the [Format > Paragraph 
Style...] menu command and click Remove All Attributes at the Class tab of the Style 

dialog box. 
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Specifying character styles 

You can apply various font properties to text. 

1 . Select the text to which the character style should be applied. 

2. Select the [Format > Font...] menu command. 

3. Select the Extended Styles tab in the Character Format dialog box. 

4. Click Style.... 

5. In the Style dialog box, specify the desired styles. 

6. Click OK. 

Copying character formats 

You do not need to repeat specifying the same character format again and again to apply it to 
different parts of the document. You can take care of these repeated actions using the Copy 
Format menu. 

1 . Place the cursor within the item whose attributes that you want to copy. 

2. Select the [Edit > Copy Format...] menu command or press the shortcut key <Shift + F2>. 

3. The Copy Format dialog box is opened. Check Character attributes and click OK. 

4. Select the text to which copied formats should be applied. 

5. Select the [Edit > Paste Format] menu command or press the shortcut key <F2>. 

Q The Copy Format option is not available if text is selected or blocked. Before using 
the option, simply place the cursor within the item whose attributes that you want to copy; 
do not select the item. To copy the attributes of an image or chart, click the image or chart 
so that its resize handles are visible, then use the Copy Format option. 

Paragraph Formatting 

Modifying paragraph styles 

You can change the appearance of paragraphs by changing paragraph properties such as 
alignment, indentation, or spacing. 

1 . Select the paragraph whose style should be modified. 

2. Select the [Format > Paragraph...] menu command. 

3. The Paragraph Format dialog box is opened. 

4. Specify Alignment, Indentation, and Spacing at the Indentation and Spacing tab of the 
Paragraph Format dialog box. 

5. Click OK. 
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Aligning paragraphs 

You can align paragraphs to the right, left, or center of the document. 

1 . Place the cursor at the paragraph that you want to align. 

2. Select Align Left [t], Align Center |W| or Align Right |W| on the Formatting Toolbar. 

H ^ that you want to justify the paragraph, select the [Format > Paragraph...] menu 
command and set Alignment to 'Justify' in the Indentation and Spacing tab of Paragraph 
Format dialog box. 

Setting the indentation 

You can set the paragraph indentation. 

1 . Place the cursor at the paragraph where indentation should be applied. 

2. Select Decrease Indent |W| or Increase Indent [||] on the Formatting Toolbar. 

B3 You may indent only the first line of a paragraph by selecting the [Format > 
Paragraph...] menu command and setting First line in the Indents and Spacing tab of 
the Paragraph Format dialog box. 

Creating numbered lists 

You can convert paragraphs to the numbered lists. You can choose various types of number 
list, such as number, English alphabet (uppercase/lowercase) or Roman numeral 
(uppercase/lowercase). 

1 . Select the paragraph that should be converted to a list. 

2. Click Numbered List on the Formatting Toolbar. 

3. To modify the list type, select {Paragraph and List Properties...} in the shortcut menu. 

4. At the Style and List Options tab in the Paragraph Format dialog box, select the number type in 
Number format and set the starting number in Start numbering at. 

5. Click OK. 
Creating bulleted lists 

1 . Select the paragraphs to which the bulleted list should be applied. 

2. Select Bulleted List on the Formatting Toolbar. 

3. Select {List Item Properties...} in the shortcut menu to change the list properties. 

4. In the Bulleted List Item Properties dialog box, choose the type of bulleted list and click OK. 
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Creating multi-hierarchy lists 

You can construct a multi-hierarchy list using the listing and indenting features. 

1 . Select the paragraph that you want to convert to a list. 

2. Click Numbered List on the Formatting Toolbar. 

3. Select the items that should be placed at the next level in the hierarchy. 

4. Click Increase Indent on the Formatting Toolbar. 



Q You can apply different list formats by selecting Bullet type or Number in the Style 
and List Options tab in the Paragraph Format dialog box. 



Merging lists and splitting a list 

Every item in a list is regarded as one unit, which makes the modification of style apply to the 
whole list. However, if you split a list into two, the application of style to one list does not 
influence the other. Activating Show/Hide Special Tag Marks on the Formatting Toolbar will 
mark the starting position of a list as a red arrow ("*"). 

Splitting a list 

1 . Place the cursor at the item where a new list should start. 

2. Select the [Format > Split List] menu command or press a shortcut key <Shift + F8>. 



B3 If you split a numbered list, the starting number of the newly created list will be 1 . 

S3 Once a list has been split, changing the list format of one list does not affect the other 
list. 



Merging two lists 

1 . Place the cursor at the first item of the second list. 

2. Select the [Format > Merge Lists] menu command or press the shortcut key <F8>. 



H When two lists that have different list formats are merged, the format of the first list is 
used. 
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Modifying HTML styles 



You can apply headings or list styles to a paragraph. 

1 . Place the cursor at the paragraph that you want to modify. To modify the style of more than 2 
paragraphs, select them by dragging. 

2. Select the paragraph style from the HTML Style drop-down menu on the Formatting Toolbar. 

Q Paragraph style is applied to the lines separated by the <br> tag (*J ) because the 
lines divided by <br> («J ) are regarded as one paragraph. On the other hand, lines 
divided by pressing <Enter> are regarded as separate paragraphs. You can easily 
discriminate between <br> (J ) and the paragraph mark ( |f ) by activating the 
Show/Hide Paragraph Marks [if] on the Standard Toolbar. 

Setting the line height 

You can adjust the line height in a paragraph. 

1 . Place the cursor at the paragraph where line height should be applied. 

2. Select the [Format > Paragraph...] menu command. 

3. In the Indentation and Spacing tab of the Paragraph Format dialog box, select the desired type of 
spacing from the Presets drop-down menu. Presets is a list of commonly used spacing formats. If 
that you want to apply spacing formats other than those provided in the Presets, enter the desired 
number in the Line height text box and select its unit from the drop-down list right beside it. 

4. Click OK. 



Specifying paragraph styles 

You can set the paragraph style using CSS. You can specify font, font size, style, font colors, 
background image, alignment, line height, borders, etc in each tab of the Style dialog box. 

1 . Place the cursor at the paragraph to which styles should be applied. 

2. Select the [Format > Paragraph Style...] menu command. 

3. In the each tab of the Style dialog box, specify the styles that you want to apply. 

4. Click OK. 
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Copying paragraph styles 

You do not need to repeat specifying the same paragraph properties again and again to apply 
them to different paragraphs of the document. You can take care of these repeated actions 
using the Copy Format menu. In other words, you can easily copy a specify paragraph style 
and apply it to the selected paragraphs. 

1. Place the cursor at the paragraph whose style should be copied. Just place the cursor and do not 
select the paragraph. 

2. Select the [Edit > Copy Format...] menu command or press the shortcut key <Shift + F2>. 

3. In the Copy Format dialog box, check Paragraph style and click OK. 

4. Place the cursor at the paragraph to which the copied style should be applied. 

5. Select the [Edit > Paste Format] menu command or press the shortcut key <F2>. 

Document Formatting 

Setting the background color 

You can apply background color to a Web document. You can also copy another background 
color and apply it to the current document using Import Colors.... 

1. Select the [File > Document Properties...] menu command. 

2. In the Document Properties dialog box, select the Appearance tab. 

3. Select the background color from the drop-down Color Picker Pop-up. 

4. Click OK and the selected background color is applied to the current document. 

Q You can copy the background color of another document by clicking Import Colors... 
and specifying the relevant document in the Document Properties dialog box. The 
background color of the selected document is applied to the current document. 

H You can use an image as your background by specifying Background image in the 
Appearance tab of the Document Properties dialog box. 

Setting page margins 

You can specify left and top margins to a document in the Styles tab in the Document 
Properties dialog box.. 

1. Select the [File > Document Properties...] menu command. 

2. Select the Styles tab in the Document Properties dialog box. 

3. Specify Left and Top under Margins by entering the values or by using the increase/decrease 
button. 

4. Click OK. 
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Using document templates 

You can apply various document templates, such as 2-column/3 -column document, to the new 
document. 

1. Select the [File > New...] menu command. 

2. The Resource Manager is opened. Click Component or Document folder in the left list and select 
the desired document template from the right template list in the right preview area. Refer to the 
Description and Filename below the preview area for the detailed document information. 

3. Click OK. 

H If you select the Frameset folder in the Resource Manager, you can choose a 
commonly used frameset among various frameset templates. 



Formats and Styles | 97 



Working with Styles 



Paragraph Styles 

Specifying class styles 

You can apply class to the selected paragraph(s). Class refers to an individual style you have 
defined. You can create a class using the [Format > Style Sheet...] menu command and 
specifying relevant values in the Style dialog box. You can define a class and apply it to 
different parts of a document whenever you want to. 

1 . Place the cursor at the paragraph whose class styles should be modified. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Select 'mystyle' in the Class tab of the Style dialog box or from the CSS Style drop-down list on 
the Formatting Toolbar. (You should first select the [Format > Style Sheets...] menu command and 
create a class named 'mystyle' with the following attributes: 'Arial', 14 point, and Strikethrough 
decoration.) 

4. Select the style to be applied in Class. 

5. Click OK. 

Specifying font styles 

You can specify the font styles of a selected paragraph. You can modify various font 
properties, such as font type, font size, decoration, and font style. 

1 . Place the cursor at the paragraph whose font styles should be modified. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Click the Font tab in the Style dialog box. 

4. Specify the Primary font and Alternate font. If you want to specify additional fonts for later use, 
enter the fonts you want in the Font text box. 

5. Specify the Size, Decoration, Style and Weight of the font. 

6. Click OK. 

Specifying color styles 

You can specify the color properties of the selected paragraph(s). You can set 
foreground/background color and a background image. In applying a background image, you 
can set the position of the image and specify whether the image is to be applied repeatedly or 
not. 

1 . Place the cursor at the paragraph whose color styles should be modified. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Click the Layout tab in the Style dialog box. 

4. Specify the foreground color and background color of the paragraph. You can choose the colors 
from the 216 Web safe colors offered in the Foreground and Background drop-down Color 
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Picker Pop-up. Click the Color Picker icon [Hj to select the color from the Color Picker dialog 
box. 

5. If you want to insert a background image, specify the image file path using Browse... to select a 
file and click Open and OK. 

• Enter the path to the image to be used as a background in the URL text box. You can also 
specify these by clicking the Browse... button. 

• Specify whether you want the image to be applied repeatedly by selecting the relevant 
option from the Repeat drop-down menu. 

• Specify the starting grid of the image in the Vert. pos. and Horz. pos. text value boxes. 
Specifying text styles 

1 . Place the cursor at the paragraph whose text styles should be modified. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Click the Text tab in the Style dialog box. 

4. Specify the Alignment, Indent, Line height, and Letter spacing. 

5. Click OK. 

Specifying box styles 

You can apply rectangular outline to a paragraph. In the Box tab of the Style dialog box, 
specify the Margins and Padding between the paragraph contents and the box. The specified 
left margin applies to the rest box borders. You can also specify the border properties to the 
individual borders. 

1 . Place the cursor at the paragraph where the box style should be applied. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Click the Box tab in the Style dialog box. 

4. Specify the Margins and Padding of the paragraph. 

5. Click OK. 

Q If you have not specified either Margins or Padding, the two values will be the same. 
If you have specified the values, Padding will be applied to the inside of the borderline, 
and Margins to the outside. Refer to Specifying border styles for detailed information. 



Formats and Styles | 99 



Specifying border styles 

You can specify border properties to the selected paragraph(s). Border properties are made up 
of border style, color, and width. Like box style, the specified left border properties will be 
applied to the rest borders. You can also apply different properties to each border. 

1 . Place the cursor at the paragraph to which the border style should be applied. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Click the Borders tab in the Style dialog box. 

4. Specify the Style, Colors, and Width and click OK. 

Q If you specify the Style, Colors, and Width of the left border, the other three sides or 
borders will automatically have the same attributes. You can also specify the attributes of 
each side separately. 

Removing all style attributes 

You can remove all the style properties from a paragraph. 

1 . Place the cursor at the paragraph whose color styles should be removed. 

2. Select the [Format > Paragraph Style...] menu command. 

3. In the Class tab of the Style dialog box, click Remove All Attributes. 

4. Click OK. 

Document Styles 

Applying style attributes to a document 

Styles in Style Sheets are applied to the entire document. You can define a series of styles in 
the Style Sheets dialog box and apply them to the selected parts using the CSS Style 
drop-down list on the Formatting Toolbar whenever you want to. 

1 . Select the text to which the style attributes should be applied. 

2. Select the desired style from the CSS Style drop-down menu on the Formatting Toolbar. 
Defining internal styles 

There are two major ways to define document attributes using style. One is to apply styles to 
individual HTML tags and the other is to define styles using Class or ID. Applying styles to 
individual HTML tags makes tags with style specification. Style definition using Class is very 
convenient because you can apply the specified Class repeatedly to different parts of a 
document. 
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Defining a set of attributes for HTML tags 

1. Select the [Format > Style Sheet...] menu command. 

2. In the Style Sheets dialog box, click Add... [J]. 

3. In the Add Style dialog box, select the tag from the Tag drop-down menu. Leave the Name text 
box as blank and click OK. 

4. In the Style dialog box, specify the desired styles and click OK. 

5. In the Style Sheets dialog box, click OK. 

Defining a class 

1. Select the [Format > Style Sheet...] menu command. 

2. In the Style Sheets dialog box, click Add... [EJ]. 

3. Check Class under Style type. Enter the class name under Name and in case you are creating a 
new style click OK. Note that Class type styles have names beginning with a period (.), though 
you should not include it when entering the name. Namo WebEditor will automatically include the 
period. 

4. In the Style dialog box, modify the styles as that you want and click OK. 

5. In the Style Sheets dialog box, click OK. 



Editing internal styles 

You can modify internal styles, which has been applied to the entire document. 

1. Select the [Format > Style Sheet...] menu command. 

2. In the Style Sheets dialog box, select the style sheet to be edited in the Internal styles list box and 



click Edit... [g]. 



3. In the Style dialog box, modify the styles as that you want and click OK. 

4. The modified styles are displayed under Style definition. 

5. Click OK. 

Saving styles as an external style sheet 

You can create different styles in the Style Sheet dialog box and save them in an external file. 
Saving the styles in an external file makes it possible to apply the specified styles to other 
documents as well. 

1. Select the [Format > Style Sheet...] menu command. 

2. In the Style Sheets dialog box, select the style sheet to be saved in the Internal Styles list box 



Q Once a class has been defined, the style lists are displayed in the CSS Style 
drop-down menu on the Formatting Toolbar. You can use the style whenever that you 
want to apply the style in a document. Styles of type ID are identical to those of type 
Class, except that an ID style can only be applied to one element in a document. 




and click Save as external file... 
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3. In the Save Stylesheet File dialog box, select the folder in which you want to save the file and 
enter the filename in Filename text box. The extension of the style sheet file is *.css. 

4. Click Save. 

Linking to an external style sheet 

In order to use an external style sheet in a document, you must create a reference to the style 
sheet file within the document. Linking to an external style sheet is one way of creating a 
reference. Note that you can link just one style file to a document. 

1. Select the [Format > Style Sheet...] menu command. 

2. In the Style Sheets dialog box, click Browse... [||] under Linked style sheet to locate and select 
a style sheet file (Style sheet filenames end with .ess extension.) You can also type the URL of the 
style sheet file directly. 

3. Click View Contents [ji>] to view the contents of the style sheet file you have selected. 

4. Click OK. 

£9 To remove the style file, click Remove [IS]. This removes only the link between the 
current document and the style sheet file, not the style sheet file itself. 

H When you publish a document containing a reference to an external style sheet, you 
must publish the style sheet file along with the document, making sure that the relative 
path from the document to the style sheet file is same on the Web site as on you own 
hard drive. However, if the style sheet reference is the URL of a style sheet file located on 
another Web site, it is not necessary to publish the style sheet file to your site. 

Importing an external style sheet 

In order to use an external style sheet in a document, you must create a reference to the style 
sheet file within the document. Importing an external style sheet in one way of creating a 
reference. 

1. Select the [Format > Style Sheet...] menu command. 

2. In the Style Sheets dialog box, Click Add external file... [||] to locate and select a style sheet file 
on your hard drive. (Style sheet filenames end with .ess extension.) The name of the style sheet 
file you select will appear in the list box. Repeat for each style sheet that you want to import. 

3. Click OK. 

Q It is only possible to link to one external style sheet. However, styles in imported style 
sheets are available to the document as though they were defined within the document 
itself. There is no limit to the number of style sheets you can import. 

£9 If you import more than one external style sheet into a document, make sure that the 
style sheets contain no styles that share the same name or that are associated with the 
same tag. If conflicts occur, it may not be possible to predict which of the conflicting style 
definitions will be used. 
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H When you publish a document containing a reference to an external style sheet, you 
must publish the style sheet file along with the document, making sure that the relative 
path from the document to the style sheet file is same on you Web site as on you own 
hard drive. However, if the style sheet reference is the URL of a style sheet file located on 
another Web site, it is not necessary to publish the style sheet file to your site. 



Various Styles 

Removing the underline from hyperlinks 

On default, the hyperlinked text appears with underline. You can remove underline from 
hyperlinks by specifying the properties of <a> tag, which represents hyperlinks in the HTML 
source. 

1. Select the [Format > Style Sheet...] menu command. 



2. In the Style Sheets dialog box, click Add... 

3. Select 'a' from the Tag drop-down menu in the Add Style dialog box and click OK. 

4. In the Font tab of the Style dialog box, select None under Decoration and click OK. 

5. In the Style Sheets dialog box, click OK. 

Adjusting the line height 

You can adjust the line height, created when you press <Enter>, or <Shift + Enter> in the Edit 
window, using the [Format > Paragraph Style...] menu command. You can also do the same task 
in the Paragraph Format dialog box, which is opened when you select the [Format > 
Paragraph...] menu command. Selecting 'Single(default)' from the Presets drop-down list lets 
the line height to be determined by the values specified in the Text tab of the Style dialog box. 

1 . Place the cursor at the paragraph whose line height should be adjusted. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Click the Text tab in the Style dialog box. 

4. Specify the desired Line height and click OK. 
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Applying the hover style 

'Hover' refers to a state when the mouse cursor is placed over a hyperlink. You can specify the 
hyperlink style in its 'hover' state. You can match the properties of 'hover' style with the Web 
page display by specifying the properties of <a> tag, which represents hyperlinks in the 
HTML source. 

1. Select the [Format > Style Sheet...] menu command. 



2. In the Style Sheets dialog box, click Add... Q, 



3. Select 'other' from the radio buttons list under Style type, ':hover' from the Name drop-down menu 
and click OK. 

4. Specify the style in the Style dialog box and click OK. 

5. Click OK in the Style Sheets dialog box. 

Adjusting the letter spacing 

You can adjust the spacing between characters in a paragraph using Paragraph Style. In case 
you don't make use of style properties, you should use blank spaces to adjust the letter spacing. 
But you can easily adjust the spacing using Paragraph Style. 

1 . Place the cursor at the paragraph whose letter spacing should be adjusted. 

2. Select the [Format > Paragraph Style...] menu command. 

3. Click the Text tab in the Style dialog box. 

4. Specify the desired Letter spacing and click OK. 

Suppressing repetition of the background image 

You can decide whether to repeat the background image applied to the paragraph. Selecting 
'Repeat' make a image appear tiled. You can also make an image repeat just horizontally or 
vertically. If you want to show the background image just once, select 'Don't repeat'. 

1 . Select the [Format > Paragraph Style...] menu command . 

2. Click the Layout tab in the Style dialog box. 

3. Enter the path or URL of the background image file in the URL text box under Background image. 

4. Select 'Don't repeat' from the Repeat drop-down menu. 

5. Specify the vertical and horizontal position of the image in the Vert. pos. and Horz. pos. text boxes. 
Click OK. 
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Chapter 9 

Hyperlinks and Navigation Bars 



Hyperlinks and Navigation Bars 
Creating hyperlinks 
Modifying hyperlinks 
Creating bookmarks 
Working with Navigation Bars 
Modifying Navigation Bars 
Navigation Trees 



Hyperlinks are the heart of the Web. Namo WebEditor makes creating and 
managing links as convenient as possible, including dynamic navigation bars that 

update automatically when you change a site's structure. 



Hyperlinks and Navigation Bars 



What are hyperlinks? 

Hyperlinks, also simply referred to as "links," are perhaps the biggest reason for the 
phenomenal success and exponential growth of the World Wide Web in recent years. A 
hyperlink is a page element (usually a word, button, or image) that "points to" another 
Web page. When the visitor viewing the hyperlink in a Web browser clicks the link, the 
browser goes to the specified Web page, which may be within the same Web site, or in 
any other Web site in the world. The power of hyperlinks lies in their ability to connect 
the millions of existing Web pages in the world to one another and to the millions of 
people who use the Web. Indeed, it may be said that hyperlinks are the whole point of the 
Web. 



hyperlink 




Hyperlinks can also point to things other than Web pages. A link can point to an image, 
an office document, a downloadable file, an FTP site, or an e-mail address, among other 
things. When you create a hyperlink on the text, the hyperlinked text will be underlined 
and the mouse-pointer will change into a hand when it is guided over the text. 

Click here to move to the next document. 

Generally, you can create a single hyperlink on an image. However, by creating an image 
map, different regions of an image may each act as separate hyperlinks to different 
documents. Refer to Creating an Image map. 

Absolute vs. Relative Hyperlinks 

There are two basic forms of hyperlinks that are used in Web documents: Absolute and 
Relative. These terms refer to how a link refers to a document, not the type of document 
the link refers to. 

URL 

A Uniform Resource Locator (URL) is an address that uniquely identifies a particular 
document on the Internet. For Web documents, the format of a URL is: 

http: //domain [/directory].] [/directory2] [/...] [/document .ext] 

(Items in brackets are optional.) For instance, in 

http://www.namo.com/products/we4/index.html, "www.namo.com" is the domain, 
"products" is a directory, "we4" is a subdirectory, and "index.html" is the document 
filename. Often, the document filename is left out of the URL. In these cases, the URL 
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points to the default document in the specified domain or directory, which is usually 
named "index.htm" or "index. html". URLs are typically used to link to documents that are 
on other Web sites. 

Absolute link 

An absolute link refers to a document using a Uniform Resource Locator (URL), the 
standard way of referencing any document on the Internet. An example of an absolute 
link is "http://www.namo.com/index.html." A URL, also known as an Internet address, is 
like a calling card that uniquely identifies a particular document on the Internet. There is 
a one-to-one relationship between URLs and Internet documents: every document on the 
Internet has its own URL, and every URL refers to a single document on the Internet. 

Relative link 

A relative link refers to a document by a kind of shorthand, based on the location of the 
target document in relation to the one containing the link. An example of a relative link is 
"product/index. html." This link tells a browser to open a document named "index.html" 
located in a "products" folder, which is within the folder containing the current document. 
Relative links can only refer to documents that are within the same Web site as the 
document containing the link, since they do not provide the Web site's domain name. 




http i//www. name com/index. htm I http ://www. n a m o . c om/te st, html 
(Absolute Link) 
test. html (Relative Link) 
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Example of Absolute hyperlinks 



Link Type 


Examples 


Web 


http://www.namo.com/products/index.html 

A typical Web link. 




http://www.namo.com 

Links to the default document at the top level of the site. 




http://www.namo.com/download/webeditor/install.exe 

links to a program file that will be downloaded by the browser. 


FTP 


ftp://ftp.namo.com/webeditor/install.exe 

Links to a program file that will be downloaded by FTP. 


E-mail 


mailto:info@namo.com 

Opens a new e-mail addressed to the recipient in the link. 



Example of Relative hyperlinks 



Link 


Location of referenced document 


index.html 


The same folder as the document containing the 
link. 


../index. html 


The folder one level above the folder containing 
the document containing the link. 


../../index.html 


The folder two levels above the folder 
containing the document containing the link. 


products/index.html 


A subfolder of the folder containing the 
document containing the link. 


products/webeditor/index.html 


A subfolder of a subfolder of the folder 
containing the document containing the link. 


/index.html 


The top level of the site. 
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Hyperlinks and Bookmarks 



When a document connected with a hyperlink is opened, the top portion of the linked 
page appears in a Web browser. There are times where you need to set the hyperlink so 
that a specific portion of the document will open in the browser window. A bookmark is 
used for such cases. 

A bookmark is an invisible marker that can be placed anywhere in a Web document and 
that can be referenced by a hyperlink. When a site visitor clicks a link that contains a 
bookmark reference, the Web browser not only loads the document the link points to, but 
also scrolls to the location of the bookmark. Bookmarks provide a convenient way to let 
site visitors jump to one or more specific locations in a long document. 

(Below is an example of a bookmark used for a document to move to a specific portion 
of another document.) 



Document 1 




Document 2 



What is a Navigation Bar? 

A navigation bar is a set of buttons or text links in a document that is used to jump to 
other documents in the same site. Namo WebEditor creates navigation bars automatically 
when you create a Web site using the Site Wizard. The navigation bars that Namo 
WebEditor creates are dynamic—they change automatically when you make changes to 
the structure of the site or change the titles of the documents that they link to. 

Types of navigation bars 

Text navigation bar 

A Navigation bar made with texts. 

Smart Button navigation bar 

A Navigation bar made with Smart Buttons. 

Flash Button navigation bar 

A Navigation bar made with Flash Buttons. 

Path navigation bar 

A Navigation bar that shows the path from the home page (the index page) to the current page. 
Navigation Tree 

A tree shaped navigation bar with which you can browse a certain section of the Web site, or the 
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entire Web site. You can view multiple levels of menus at once by collapsing and expanding the 
nodes. 

Submenu 

A pop-up menu that appears when you place the mouse-pointer over the navigation bar. The 
pop-up shows the pages that are located one level lower that the hovered menu. 

Sublevel 

Displays the sublevel menu along with the main navigation bar. 

Site Structure and Navigation 

Site structure and Navigation 

It is important to design the Web site logically to make it an easy-to-browse Web site. 
Planning and designing the site structure before actually creating one is a key factor in 
site creation. A well-made navigation helps the visitor understand the Web site better, 
providing the information the visitor needs faster. 

Site Manager and Navigation bar 

A navigation bar is created automatically, based on the Web site structure specified in the 
Site Manager. It is added to every Web document included in the site. Once inserted, the 
navigation bar is updated automatically whenever the structure is changed, relieving you 
of all the work of updating and verifying links. 

Navigation Bar and Web Documents 

Site structure and documents 

The site structure is mainly used for making navigation bars. Therefore, the site structure 
does not necessarily include all the Web documents that exist in the Web site. There are 
documents that only open in pop-up windows, and they are not likely included in the 
structure. 

Site structure and frameset 

If you use frameset documents, they may not appear in the site structure while one of its 
frame documents does. This happens when you make a navigation bar that is hyperlinked 
to the frameset document. However, you can change the settings to include the frameset 
document in the structure. 
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Documents included in the navigation bar 



Most navigation bars have links to the pages that are at the same level. Links to the 
parent page or to the index page are popular ones that are not linked to the same level 
pages. 

You can insert a navigation bar that is linked to pages that are located at the same level, 
the level above, or the level below. Or, you can make a navigation bar that shows the 
next-to-top-level pages, regardless of the level of the current page. This type of 
navigation bar may be used when that you want to show main menus of the Web site. You 
can also make a navigation bar that is linked to a specific level, or that moves to previous, 
next, or parent pages. 
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Creating hyperlinks 



Creating hyperlinks with text 

You can set hyperlinks to various objects. Text is the most basic object to which a hyperlink 
can be applied. 

1 . Select the text that you want to use as a hyperlink. 

2. Select one of the following methods. 

3. Enter the relevant URL and target frame in the Hyperlink text box on the Hyperlink Toolbar. 

4. Select the [Insert > Hyperlink...] menu command. In the Create Hyperlink/Hyperlink Properties 
dialog box, specify the hyperlink attributes such as URL, Target frame, etc, and Click OK. 

Q If you need to specify the target frame, click the Browse Target Frame... ||] in the 
Create Hyperlink/Hyperlink Properties dialog box. In the Target frame dialog box select 
the target frame by clicking on the target frame area and click OK. 

Q To show the Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] menu 
command. 

Q URLs in the Edit window are automatically changed into hyperlinks. If you want to 
deactivate the 'auto convert' option, select the [Tools > Preferences...] menu command 
and uncheck the Automatic link creation text box in the Edit tab. 

Creating hyperlinks on images 

You can apply hyperlink to an image as well as text in the Edit window. 

1. Select an image by clicking it. 

2. Select one of the following methods. 

3. Enter the relevant URL and target frame in the Hyperlink Toolbar. 

4. Select the [Insert > Hyperlink...] menu command. In the Create Hyperlink/Hyperlink Properties 

dialog box, specify the hyperlink attributes such as URL, Target Frame, etc, and Click OK. 

Q If you need to specify the target frame, click the Default Target Frame... button. In the 
Target Frame dialog box select the target frame by clicking on the target frame area and 
click OK. 

H You can also modify your hyperlinks by double-clicking the image and clicking the 
Create Hyperlink... button in the Image Properties dialog box. 

H To display Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] menu 
command. 
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Creating hyperlinks to e-mail addresses 

You can create a hyperlink to e-mail addresses, which opens a mail client program and 
displays the linked e-mail address when clicked. 

1 . Select the text that you want to use as a hyperlink. 

2. Click Hyperlink [#] on the Standard Toolbar or select the [Insert > Hyperlink...] menu command. 

3. In the Create Hyperlink/Hyperlink Properties dialog box, select 'mailto' from the Scheme 
drop-down menu and enter the e-mail address in URL. 

4. Click OK. 

Q E-mail addresses you have entered in the Edit window are converted automatically to 
hyperlinks. If you want to deactivate this 'auto convert' option, select the [Tools > 
Preferences...] menu command and uncheck Automatic link creation in the Edit tab. 
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Modifying hyperlinks 



Modifying hyperlink attributes 

You can modify properties of hyperlinks you have created, such as URL, Target frame, etc. 

1 . Double-click the text or image containing hyperlinks. 

2. In the Hyperlink Properties dialog box, modify hyperlink properties such as Target frame and 



3. 



URL. 

Click OK. 





Q You can modify properties of a hyperlink by selecting a hyperlinked element and 
using the Hyperlink Toolbar. 

Q If you place your mouse over hyperlinked text or images, its URL appears in the 
status bar at the bottom of the Edit window. 



Modifying hyperlink colors 

1. Select the [File > Document Properties...] menu command. 

2. Specify the colors of Hyperlink, Visited Link, and Active Link in the Appearance tab in the 
Document Properties dialog box. 

3. Click OK. 

Q You can specify your own default colors by modifying the colors of different hyperlinks 
in the Document Defaults tab in the Preferences dialog box. 
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Removing underline from hyperlinks 

In the default setting, any text containing a hyperlink appears underlined. This may be 
removed using a CSS Style. Using CSS also allows you to apply rollover effect to hyperlinks. 

1 . Select the [Format > Style Sheet...] menu command. 

2. Click Add... [5] in the Style Sheet dialog box. 

3. Select 'a' from the Tag drop-down menu in the Add Style dialog box and click OK. 

4. In the Font tab of the Style dialog box, select None under Decoration. 

5. Click OK in the Style Sheet dialog box. 

H If you want to remove underlines from only certain hyperlinks in your document, you 
should modify the attributes of the hyperlinks using Paragraph Style by selecting the 
[Format > Paragraph Style...] menu command. 

Applying a rollover effect to hyperlinks 

The color of hyperlinks can be formatted to change when the mouse-pointer is held over the 
links. 

1 . Select Other in the Add Style dialog box. 

2. Select ':hover' from the Name drop-down menu and click OK. 

3. Select the Layout tab in the Style dialog box. 

4. Change the Foreground color using the Color Picker Pop-up and click OK. 

Opening the hyperlinks 

The target document of a hyperlink can be opened in the Edit window without switching to the 
Preview tab. 

1 . Select the hyperlinked text or image. 

2. Select {Open Hyperlink} in the shortcut menu. 

3. The hyperlinked document will open in the Edit window. 

Q You can also open the hyperlinked document in the Edit window by clicking the link 
while pressing the <Alt> key. 

H If the link points to a file on the Web and you are connected to the Internet, Namo 
WebEditor will connect to the Web site hosting the file and download it. 
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Finding and replacing the text in hyperlinks 

You can find and replace a specific part in only the URLs of the hyperlinks. 

1. Select the [Edit > Replace...] menu command. 

2. Enter the text that you want to find and replace with in the Find and Replace with fields in the 
Find/Replace dialog box. 

3. Check Match in hyperlinks only under Options and specify Direction and range. 

4. Click Replace or Replace All to replace the specified item in Find with the item in Replace with. 

5. Click Close. 

II ^ 

jjjjJ \EditA HTML(F6) 
www.namo.co.kt 

H Checking Search all open documents under Direction and range allows you to find 
and replace a specific URL in all the documents that are currently opened in the Edit 
window. 

Removing hyperlinks 

You can remove hyperlinks which has been applied to text or images. 

1. Place the cursor anywhere on the link (the hyperlinked text). If the hyperlink is on an image, select 
the image. 

2. Click Remove Hyperlink \$\ on the Standard Toolbar or select the [Insert > Remove Hyperlink...] 

menu command. 

Q You can easily remove the hyperlinks by placing the cursor anywhere in the 
hyperlinked area and pressing the shortcut key <Shift + F9>. 

H To remove hyperlinks from multiple texts and/or several images at once, select them 
all and press <Shift + F9>. 




www.namo.com 
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Creating a hyperlink that opens a pop-up window 

You can make a hyperlink that opens a pop-up window, where the hyperlinked document is 
displayed. You can specify the properties of the pop-up window, such as x/y coordinate and 
size. 

1 . Select the hyperlinked text or images. 

2. Click Hyperlink [IF] on the Standard Toolbar or select the [Insert > Hyperlink...] menu command. 

3. In the Create Hyperlink/Hyperlink Properties dialog box, click Open New Window... at the bottom 
of the dialog box. 

4. In the Script Wizard - Pop-up Window dialog box, enter the Window name and URL. Then, 
specify the position, size, and attributes of the pop-up window and click Finish. 

5. Click OK in the Create Hyperlink/Hyperlink Properties dialog box. 
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Creating bookmarks 



Bookmark refers to a mark in a Web page, which lets you jump to a specific position in a Web 
document. Setting a hyperlink to a bookmark lets you jump not only to a Web document, but 
also to a specific location where a bookmark has been inserted. 

Creating bookmarks 

1 . Place the cursor at the location or select the area you intend to insert a bookmark. 

2. Select the [Insert > Bookmark...] menu command or select {Create Bookmark...} in the shortcut 
menu. 

3. In the Bookmarks dialog box, enter the name of the bookmark in the Bookmark name text box 
and click Add. 

4. Click Close. 

Q You can create a hyperlink to a bookmark in the same document by clearing the URL 
text box and selecting a bookmark in the Bookmark drop-down menu. The selected 
bookmark will appear by itself in the URL text box, preceded by a # sign. When such a 
link is clicked in a browser, the browser simply scrolls to the location of the bookmark in 
the same document. 

23 Selecting Show/Hide Special Tag Marks [n] on the Standard Toolbar allows the 
bookmarked area to appear with a dotted blue underline. If you selected some text before 
creating the bookmark, that text will appear with a dotted blue underline. Otherwise, a 
small yellow bookmark symbol ( |^| ) will appear at the insertion point. These are only 
visible in the Edit window, not in a browser or in the Preview window. 

Modifying a bookmark 

1. Right-click the bookmarked area and select {Modify Bookmark...} in the shortcut menu. 

2. Enter a new bookmark name in the Bookmark name text box and click Rename. 

3. Click Close. 

H To remove a bookmark, select the link that you want to remove from the Bookmark 
list and click Remove. 



118 | Chapter 9 



Creating hyperlinks with bookmarks 

Creating hyperlinks with bookmarks will allow your site visitors to jump to a specific position 
of your Web document. 

1 . Insert a bookmark in the document. 

2. Select the text or image that you want to use as a hyperlink. 

3. Select one of the following methods. 

4. Select a bookmark from the Bookmark drop-down menu on the Hyperlink Toolbar. 

5. Select the [Insert > Hyperlink] menu command and specify Bookmark in the Create Hyperlink 

dialog box and click OK. 

H To show the Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] menu 
command. 

Q You can make the visitors jump to a specific position of the Web document by 
specifying a Bookmark and a URL in the Create Hyperlink dialog box. 
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Working with Navigation Bars 



Inserting a text navigation bar 

After building the structure of the Web site, you can insert navigation bars to the documents. 
Text navigation bar is the basic form of navigation bars that consists of hyperlink texts. 

1 . In the Site tab of the Site Manager and select the document of which that you want to insert a text 
navigation bar and open it by double-clicking it The selected document is opened in the Edit 
window. 

2. Select the [Insert > Site Element > Navigation Bar...] menu command. 

3. In the Navigation Bar Properties dialog box, select a Navigation bar type. 

4. Select the Orientation of the navigation bar. To modify the Navigation text, Separator, Line 
height, etc, click to open the Navigation Bar Text Setting dialog box and specify the relevant 
values. 

5. Select Use text in Type. 

6. Click OK. 

[About Me] [Favorites] [Downloads] [Links] 

13 If you select Previous/Next, or Previous/Up/Next, or Previous/Home/Next for the 
Navigation Bar type, you can change the Navigation Text in the Navigation Bar Text 
Setting dialog box. 

Inserting Smart Buttons and Flash Buttons 

Other than text navigation bar, you can create a navigation bar made with buttons. You can 
select either Smart Buttons or Flash Buttons for the navigation bar. 

1 . Open a document in the Site tab of the Site Manager. 

2. Select the [Insert > Site Element > Navigation Bar...] menu command. 

3. Select the Navigation bar type in the Navigation Bar Properties dialog box. 

4. Choose the Orientation. Select from Horizontal or Vertical. 
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5. Select Use Smart Button or Use Flash Buttons in the Type. 

• When Use Smart Buttons is selected: Click [77] and select a Smart Button in the Smart 
Buttons tab of the Resource Manager. 

• When Use Flash Buttons is selected: Click [77] and select a Flash Button in the Flash 
Buttons tab of the Resource Manager. 

6. Click OK. 

Navigation bar made with smart buttons: 

i About Mg) v Favorites) y_ Photo ^ v Download L Links ^) 

Navigation bar made with flash buttons: 

About Mft I FavarllM ( Photo Galloryl DawiHCiiils| LlnKft | 



Q After modifying the appearance of a navigation bar button image, if that you want to 
apply the modified navigation bar attributes to all the navigation bars in all the documents 
in the site, select Apply to all similar navigation bars in the site, in the Navigation Bar 
Properties dialog box. 



Inserting a path navigation bar 

A path navigation bar shows the path from the home (the index page) to the current page. It 
helps you understand where the current page is positioned in the site structure. 

1 . In the Site tab of the Site Manager, open the document to which that you want to insert a path 
navigation bar. 

2. Select the [Insert > Site Element > Navigation Bar...] menu command. 

3. In the Navigation Bar Properties dialog box select 'Path from home' in the Navigation bar type. 



N avigation bai type: 



N avigation tree: 



User defined level 

Top level in the structure 

Parent level of the current page 

Siblings 

Child level of the current page 



Pievious^Nent 
Previous/Up/Next 
Pievious^Home^Nent page 
Link to parent page 



[O] Home 
7 [«) About. He 
profile 
Favorites 

| g) Sports 
Arts 

L • g| Photo 
r" D owil o ads 
[Ol Lintes 



Select Horizontal or Vertical in Orientation. 

Select shape of the navigation bar in the Type. 

Specify the target frame in Target and the target frame of the index page in Home target under 
Frame. 

Click OK. 



[Home] [Favorites] [Photo] 
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Inserting a navigation bar with submenu 

You can create a navigation bar with a submenu which appears when you place the 
mouse-pointer over the navigation bar. The submenu will display hyperlinks of the sublevel 
documents. 



1. 



In the Site tab of the Site Manager, open the document to which that you want to insert the 
navigation bar with submenu. 

Select the [Insert > Site Element > Navigation Bar...] menu command. 

In the Navigation Bar Properties dialog box, select a Navigation bar type. 

Check to select Pop-up submenus. 

5. Click I ... | and specify Text, Background, and Border in the Navigation Menu Settings dialog 
box. 

• Specify Font, Size, Normal, Highlight under Text. 

• Specify Color, Highlight, Width, Light, Dark under Background. 

• Specify Color and Size under Border and click OK. 



Navigation Menu Sellings 



Text 
Font 
Cotan 



3 Size: |iopi zi 

HigMght I lk| 



Background 

Cctol: r~ 



Light 
Badeis 
Color 



Highlight: 



Width |120 



\\'\ Height |20 



6. Select the Orientation and Type in the Navigation Bar Properties dialog box. 

7. Click OK. 
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Modifying Navigation Bars 



Renaming navigation bars 

You can change the names of the documents in the navigation bar. The names in the 
navigation structure will be used in navigation bars. 

1 . Open the Site tab of the Site Manager. 

2. Click to select the document to rename in the Navigation window. When you select a document, 
the color of the selected document will change from 'light blue' to 'dark blue'. 



3. 
4. 



Select the [File > Rename] menu command, or click Rename iD 
Enter a new name and press <Enter>. 




Changing the shape of the button navigation bar 

You can change the shape of the Flash Buttons or Smart Buttons used in the navigation bars. 
Changing the shape of smart buttons 

1. In the Edit window, double-click the navigation bar inserted in the document. 

2. In the Navigation Bar Properties dialog box, click [TT] next to Use Smart Buttons. 

3. The Smart Button tab of the Resource Manager will open. 

4. Select a Smart Button and copy it into My smart buttons folder. 

5. Right-click the Smart Button and select {Modify...} in the shortcut menu. 

6. Make the modification you want in WebCanvas, and click Finish. 
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7. Click OK in the Resource Manager. 

8. Click OK in the Navigation Bar Properties dialog box. 

Before modification 

1 About Me) i Favorites^ y Download ^ Links ^) 

After modification 

y_ About Me J l ^Favorites J l ^Downloads) ^ Links J 

Changing the shape of flash buttons 

1. In the Edit window, double-click the navigation bar inserted in the document. 

2. In the Navigation Bar Properties dialog box, click [3| next to Use Flash Buttons. 

3. The Flash Button tab of the Resource Manager will open. 

4. Select a button and click OK. 

5. Click OK in the Navigation Bar Properties dialog box. 
Before modification 



After modification 




Q You can not modify flash buttons as you do with smart buttons. However, you can 
change the properties and the link in the Flash Button Properties dialog box. To open 
the Flash Button Properties dialog box, Select a Flash Button and copy it into My smart 
buttons folder. Right-click the Flash Button and select {Modify...} in the shortcut menu. 

Q After modifying the appearance of a navigation bar button image, if that you want to 
apply the modified navigation bar attributes to all the navigation bars in all the documents 
in the site, select Apply to all similar navigation bars in the site, in the Navigation Bar 
Properties dialog box. 



Changing the shape of text navigation bars 

You can change text properties of the navigation bar, such as font, size, and color. You can 
change the name of the navigation bar in the Site tab of the Site Manager, and change text and 
separator shape in the Navigation Bar Text Setting dialog box. 

Changing navigation text 

1 . Double-click the text navigation bar in the Edit window. 

2. In the Navigation Bar Properties dialog box, click [Tjj next to Use text. 
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3. Modify Navigation text in the Navigation Bar Text Setting dialog box. 

4. Click OK. 



Before Modification 


After Modification 


[Previous][Home][Next] 


[Before] [Main][After] 



Changing separators 

1 . Double-click the text navigation bar in the Edit window. 

2. In the Navigation Bar Properties dialog box, click next to Use text. 

3. Modify the shape of the Separator in the Navigation Bar Text Setting dialog box. 

4. Click OK. 

Before Modification After Modification 

[Previous] [Home] [Next] (Previous) {Home} {Next} 



Changing the shape of submenu 

Submenu is an optional part of a navigation bar that appears as you place the mouse-pointer 
over the text or button navigation bars. Submenu shows links to the documents that are in the 
sublevel of the hovered menu. You can change the appearance of the submenu. 

1. Double-click the navigation bar. 

2. In the Navigation Bar Properties dialog box, click I ... I next to Pop-up submenus. 

3. Set the properties of the submenu such as Text, Background, and Borders in the Navigation 
Menu Settings dialog box. 

4. Click OK in the Navigation Menu Settings dialog box. 



Before modification 



[About Mel [ .-]• - I I--1 [L ' 1 f 1 















After modification 



TAbout Mel 


-avoritesl fDownloadsl ILinksl 




sports 

Arts t>- 
Photo ^ 





H After modifying the appearance of a navigation bar button image, if that you want to 
apply the modified navigation bar attributes to all the navigation bars in all the documents 
in the site, select Apply to all similar navigation bars in the site, in the Navigation Bar 
Properties dialog box. 
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Navigation Trees 



Inserting a navigation tree 

A navigation tree is a tree-shaped navigation bar with which you can browse multiple levels 
of documents. A navigation tree is created inside a layer in the Edit window. 

1 . Select a document in the Site tab of the Site Manager and open it. 

2. Select the [Insert >Site Element > Navigation Tree...] menu command. 

3. In the Navigation Tree Properties dialog box, select the top level of the tree. You will be able to 
browse all, and only, the documents under the top level document with the navigation tree. 

4. Specify Text, Bullet, and Frame. 

• Specify Font, Size, Normal, and Highlight. 



Specify the shape of the bullets. 
Specify the Target frame. 



i •[•) jtbout myself 

E 1 Favorites 
;- B) Subject 1 
j-gl Subject Z 
Subject 3 

- ~@1 Phetos 
— @) Photo 1 
• 0] Photo 2 

j • § Photo 3 

1 [31 Links 



5. Click OK. 



✓ About Me 

► Favorites 

Sports 
Arts 
Photo Gallery 

► Downloads 

Cool Images 
Links 



Normal: 
Highlight: 



Collapsed: ► ^| ^| ■ 
Expanded: </ ■ 



~3 



H If the name of the navigation tree is too long, it will appear in two lines. In such cases, 
simply enlarge the width of the layer. 
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Changing the shape of a navigation tree 

You can change the shape of the navigation tree by modifying the text properties and 
changing bullet images. 

1. Double-click a navigation tree inserted in the Edit window. 

2. Change Font, Size, Normal, Highlight in the Text of the Navigation Tree Properties dialog box. 

3. Change the Collapsed and Expanded bullet images in Bullet. The bullets show whether the 
specific navigation tree node is expanded or collapsed. 

4. Click OK. 



Before modification 


After modification 
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V\£b Graphics 

Working with Images 
Inserting Images 
Modifying Images 
Image Effects 
Creating an Image Map 
Photo Album 
Inserting a Smart Button 
Editing a Smart Button 
Copying a Smart Button 
Managing a Smart Button 
Compressing a Smart Button 
Converting a Smart Button to an ordinary image 
Working with Flash Buttons 



N amo W ebE ditor features a complete set of integrated graphics tools 
to hdp you get the most out of your W &> yaphics. 



Working with Images 



Web Documents and Graphics 



Graphics are very important visual components in Web documents. Even the colors of the 
text, objects—such as tables or layers— and the background are important factors in the 
way Web documents are perceived. But using various text properties cannot always be 
successful in creating the visual effects you want. In such cases, you can overcome the 
absence of variety by inserting images— necessities of Web documents. Namo WebEditor 
supports various image file formats - GIF, JPG and even PNG, BMP, WMF, SIS. 



Headline News 

- Namo WebEditor 5 is released. 

- Namo DeepSearch 3 is released 



B Namo 

DeepSearch 

A compact, high performanc 
internet site search engine 




Text Only example 



Example with images 



When you want to use special fonts in your Web documents, you must convert text to 
images. If not, the font in your Web documents may be displayed as a basic font in your 
site visitor's browser, simply because the font is not supported by the visitor's system. 
You also need to convert the text to images when you want to apply effects such as a 
shadow or borders. Namo WebEditor offers Smart Buttons, which help you to easily 
create texts that are converted and saved as images with various effects. There are also 
many cases where you may wish to embed texts in an image or make an image blurry, for 
use as a background image. For such situations, Namo WebEditor offers various Image 
Effect features that let you apply numerous effects to your images. 



News 



Headline Ktess 



Image created from the text 



Texts embedded in an image 
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Web Documents and Colors 



Colors are usually applied to the text, background, tables, or layers of Web documents. 
Various visual effects can be created with a combination of colors. 

Color representation and RGB code 

HTML documents use RGB code, which blends and specifies various colors based on the 
three basic colors—Red, Green, and Blue. The RGB code is composed of 6 hexadecimal 
numbers (0~F). For example, Red is F0000, Green is 00FF00 and Blue is 0000FF in this 
notation. 

Various Image File Formats 

Bitmapped images and Vector images 
Bitmapped images 

Bitmapped images are the most common image-type found on the Web. GIF, JPEG, BMP, and 
PNG are all bitmapped image formats. A bitmap is an array of color values. Each color value 
determines the color of a pixel (one of the tiny dots that make up an image on your screen) in the 
image. For black and white images, the color value of each pixel can be expressed in a single bit 
of information as just 0 or 1 . For color images, more bits per pixel are required. The more bits 
used to define the color values, the more colors an image can have, and the bigger the file size of 
the image becomes. These days, most computer graphics, including Web graphics, use 8, 16, 24, 
or 32 bits per pixel; 8 bits and 24 bits are most common. Bitmapped images are suitable for most 
types of images (and are the only choice for photographic images), and the most common formats 
are supported by all Web browsers (except text-only browsers), but they have two weakness 
compared to the other main image type-vector images: they have relatively large file sizes; they 
become blocky, or "pixellated", as you resize them. See the images below for an example of 
pixellation. The relatively large file sizes can be minimized using compression techniques such as 
JPEG, but there's nothing you can do about the pixellation. Because of this, it's generally 
advisable not to resize bitmapped images in your Web pages. 



Vector images 

Unlike bitmapped images, which are defined by an array of color values, vector images are 
composed of vectors. Simply speaking, a vector is a line with a definite length and direction. 
Vector images can also include curves, although technically a curve is not a vector. The important 
point about vector images is that they are described by mathematical expressions, not by arrays 
of bits. This fact has two important consequences: vector images have relatively small file sizes, 
and they can be resized with no loss of smoothness (see the sample images below). 




Original size 



400% Magnification 
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Original size 400% Magnification 



There are two main drawbacks to using vector images in your Web pages. The first is that 
photographs cannot be saved as vector images, because it's impractical to describe the 
potentially millions of details in a photograph using mathematical expressions-it could be done, 
but the resulting image file would be much larger than a bitmapped image of the same photograph. 
The second drawback is that not all browsers support vector image formats. Windows Meta File 
(WMF) is the most common vector image format. Another format is Macromedia Flash, which is 
mostly used for vector-based animations. 

Popular Web image formats 
GIF 

Graphics Interchange Format (GIF) is a compressed bitmapped format that uses 8 bits per pixel. 
Originally developed by CompuServe, a once-popular online information service, GIF is one of the 
two most common image formats used on the Web (the other being JPEG). Since GIF images 
use only 8 bits per pixel, they can only contain up to 256 colors. Thus, they are not the best choice 
for photographs. The compression used in GIF images works by detecting repetitive areas in the 
image, such as areas of the same color. The compression method is lossless, meaning that no 
information is lost, but it is not very effective for compressing photographic images. Of the two 
most common Web image formats, GIF is preferred for non-photographic images, such as 
illustrations and screen shots, because of its lossless compression. GIF image files use the .gif file 
extension. 

JPG (or JPEG) 

JPEG, which stands for Joint Photographic Experts Group-the organization that developed the 
format-is a highly-compressed 24 or 32 bit image format. JPEG images can be compressed to a 
small fraction of their uncompressed size using a lossy compression technique. The compression 
is called 'lossy' because it actually discards some information in the image. This is possible 
because the human eye is not particularly sensitive to subtle color changes. The level of 
compression can be specified when a JPEG image is saved. The greater the compression, the 
more information is discarded to reduce file size. At high levels of compression, the loss of detail 
can be quite visible. 




(JPG example - Original size) (JPG example - 600% Magnification) 
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In the magnified image above, notice the blocky, off-color areas in the tan-colored area and the 
bright outlines around the letters-both are artifacts caused by a high level of compression. 
Nevertheless, JPEG is the format of choice for photographic images on the Web, due to its 
support of full (24-bit) color and great compression ratios. JPEG image files use the jpg or the 
Jpeg file extension. 

PNG 

Portable Network Graphics (PNG), like GIF, is a bitmapped format that uses lossless compression. 
The PNG format has a number of advantages over GIF, including support for full-color (24-bit) 
images-making it suitable for photographic images-and gamma correction, which helps ensure 
that an image looks equally bright or dark on different monitors. Unfortunately, however, although 
PNG is supported by most modern Web browsers, it is not nearly as common as GIF (though this 
may change in the future). PNG images files use the .png file extension. 

Interlaced GIF and Progressive GIF 

Usually, images on Web pages are displayed a few lines at a time, from top to bottom, as they are 
being downloaded by the browser. But interlaced GIF images and progressive JPEG images 
instead get progressively less blocky as they are being downloaded. The effect is similar to a 
picture coming into focus. This effect lets the site visitor get a rough view of the whole image, 
rather than a sharp view of part of the image, as he or she is waiting for the image to finish 
downloading. To make a GIF image interlaced or a JPEG image progressive, select the option 
when you save the image. 

Animated GIFs 

An animated GIF image consists of several still images that are shown serially in rapid succession 
to produce an illusion of motion. Animated GIFs are very popular on the Web, since they are easy 
to make and supported by all browsers that can display images, whereas movie files, such as 
Windows Media and QuickTime files, are not. The sample image above that demonstrates 
progressive rendering is an animated GIF. Namo WebEditor comes with a utility called Namo GIF 
Animator, which you can use to make your own animated GIFs. 

Images and the Loading Time 

Inserting images in a Web document can increase the file size, which will have an effect 
on the loading time of the Web document. (Loading time refers to the time your Web 
browser spends bringing in a Web document from the World Wide Web.) The loading 
time will be overwhelmingly long, especially when you connect to the Internet using a 
modem. When you create a Web document, it is suggested that you take the loading time 
into consideration. The following are some suggestions that can help you avoid this 
problem. 

Image description (Alt Text) 

Alt Text can be applied when you want to add some description about an image. Using 
Alt Text, you can let your site visitors read information on an image while they are 
downloading the image file. 



Web Graphics | 133 



Interlaced GIF and Progressive JPEG 



Namo WebEditor supports Interlaced GIF and Progressive JPEG (JPG). These file 
formats let your browser show the image bit by bit, while downloading the image file. 
This effect lets the site visitor get a rough view of the whole image, rather than a sharp 
view of part of the image, as he or she is waiting for the image to finish downloading. To 
make a GIF image interlaced or a JPEG image progressive, select the option when you 
save the image. 

Image Map 

An Image Map refers to an image that has sections designated to act as hyperlinks to 
different URLs. If you apply a hyperlink to an entire image, only one hyperlink for the 
image can be specified. However, if you make use of an image map, you can specify 
several hyperlinks to the image. In such cases, an image contains several areas serving as 
hyperlinks called Hot Zones. 

Color Picker 

The Color Picker is a collection of colors where you can easily pick the color you want to 
use. The Color Picker is used to specify the colors of objects in your Web documents. 
Click the Color icon in the Inspector or dialog boxes to select a color in the Color Picker 
Pop-up or Color Picker dialog box. The Color Picker Pop-up contains 216 Web-safe colors. 
Web-safe colors have the same appearance in both Netscape Navigator and Internet 
Explorer, regardless of the Operating System. 

Color Picker Popup 

Click the Color icon in the Inspector or dialog boxes to open the Color Picker Pop-up. 
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Color Picker dialog box 

Click HI] in the Color Picker Pop-up to open the Color Picker dialog box. You can make either 
216 Web-safe colors or 16 million colors by controlling the 6 factors of colors. 




What is a Photo Album? 

A Photo Album is a photograph management tool; an enhanced feature of Namo 
WebEditor 4's Image Gallery. 

You can insert multiple images, creating thumbnails for them along with links to the 
original images. This is a very powerful and convenient feature that lets you automatize 
complex tasks of inserting photographs, creating thumbnails, and setting proper 
hyperlinks by offering three simple steps: Photo Album - Select Files, Photo Album - Select 
Type, and Thumbnail Settings. 

With the popularization of digital cameras, it is now common to upload digital 
photographs on the Web. Using Photo Album, you can work with digital photographs in 
various ways. 
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What is a Thumbnail? 



A thumbnail refers to a small image inserted into a Web page to represent its original 
image. Inserting multiple images in a Web page makes the visitors' downloading time 
long. Accordingly, it is suggested to let site visitors check the layout of original images 
through the thumbnails and to display the original image on a separate page when the 
corresponding thumbnail is clicked. Namo WebEditor 5.5 supports various thumbnail 
effects, which enables you to build a creative and stylish homepage. 




What is Smart Button? 

A Smart Button refers to a vector-based image created by Namo WebEditor's Smart 
Button feature. You can create text images, usually used as paragraph headings, banners, 
buttons, and/or table titles. You can create various bullets, buttons, and banners using the 
Smart Button feature. 

Why Smart Button? 

You can use the Smart Button feature to create colorful, vector-based buttons and banners 
that can be resized without any loss of sharpness and edited at any time. You can create 
fascinating buttons in WebCanvas without using any professional graphic software. To 
obtain more detailed information on vector graphics, refer to Various image file formats. 

When to use the Smart Button feature 

when you are inserting a new Smart Button or editing an existing Smart Button. 

when you want to change the appearance of the buttons in a navigation bar (in a document that 
uses a theme). 

when you want to change the appearance of a banner (in a document that uses a theme). 
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Inserting Images 



Inserting an image 

1 . To insert an image into the current document, place the cursor where you want to image to 
appear. 

2. Select the [Insert > Image...] menu command, or click Insert Image [|§] on the Standard Toolbar 
or press <Ctrl + Shift + l>. 

3. Specify the path and name of the image file in the Image Properties dialog box. 

4. Click OK. 

Q However you insert an image, Namo WebEditor will prompt you to copy the image file 
to the folder containing your document when you save the document. If the original image 
file is somewhere on your local hard drive or network, you should let Namo WebEditor 
copy it. If the original image file is on a Web site, and that you want to keep it there, do 
not let Namo WebEditor copy the image file. 

Inserting a background image 

You can insert a background image in the document. 
Using Inspector 

1. Click in the Document Inspector. 

2. Choose an image file in the Open dialog box and click Open. 

Using the Document Background Image dialog box 

1. Select the [Insert > Image Element> Background Image...] menu command. 

2. Click Browse... in the Document Background Image dialog box and specify the path and name of 
the image. 

3. Click OK. 

Q Alternatively, you can click Insert Clip Art [§[] on the Standard Toolbar and click 
Insert As Bg after choosing a Clip Art image for the background. 
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Using Clip Art 



Inserting Clip Arts 

Insert a Clip Art image in the document. Click the Insert As Bg button in the Clip Arts tab of the 
Resource Manager, if you want the Clip Art to be inserted as a background image for the 
document. 

1 . Place the cursor where you want to insert a Clip Art image. 

2. Click Insert Clip Art \W\ in the Standard Toolbar, or select the [Insert > Image Element > Clip 
Art...] menu command. 

3. In the Clip Arts tab of the Resource Manager, select a group and then a folder from the category 
list in the left window. 

4. Click to select a Clip Art image in the Preview window on the right. 

5. The Filename and File size of the selected Clip Art image will be displayed in the status bar 
located below the Preview window. 

6. Click OK to insert the Clip Art image. 
Adding Clip Arts 

If you have one or more image files that you use frequently, you can add them to Namo 
WebEditor's Clip Art library for easy access. Select Make Thumbnail in the shortcut menu to 
sort the images in alphabetic order. 

1 . Click \W\ on the Standard Toolbar or select the [Insert > Image Element > Clip Art...] menu 
command. 

2. In the Clip Arts tab of the Resource Manager, select a folder to which that you want to add an 
image. 

3. Click the Menu button and select Import File.... 

4. Select a file in the Open dialog box. 

5. Select Open and the selected image will be added to the specified folder. 

§3 If that you want to remove an image from the Clip Art, select Delete in the shortcut 
menu. 
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Modifying Images 



Resizing images 

You can resize the image inserted in the document. Bitmap images, such as GIF or JPG files, 
may look blurry when enlarged. Whereas the Vector images such as WMF or Flash files will 
remain sharp and clear regardless of their expanding size. If you want to restore the size of the 
image, click Image size restore [Ml. 

Using the Inspector 

1. Select an image 

2. In the Inspector, specify the size of the image in pixels or in percentage. You have to select the 
Height and Width check boxes to apply the specified size to the image. 



Using the Image Properties dialog box 

1. Double-click an image. 

2. In the Image Properties dialog box, set the size of the image in pixels or in percentage. You have 
to select the Height and Width check boxes to apply the specified size to the image. 

3. Click OK. 



Setting image borders 

You can apply border to images. Specify the width in pixel. Border color is black by default. 

Using the Image Inspector 

1. Select an image. 

2. Specify the width of the border in the Inspector. 




H If you enlarge an image, its loading time will increase accordingly. 




No border 



Border thickness 
- - 5 pixels 
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Using Image Properties dialog box 

1. Double-click an image. 

2. Specify the width of the border in the Image Properties dialog box. 

H You can change the Style, Colors, Width of the border in the Borders tab of Style 

dialog box. 

Aligning images 

You can specify how to arrange images with the text. Text will be the basis for Top of Text, 
Absolute Middle, Absolute Bottom alignment and the image will be the basis for the rest of the 
alignments. 

Using Inspector 

1. Select an image. 

2. Choose the alignment in the Inspector. 

Using dialog box 

3. Double-click an image. 

4. Choose the alignment from the Alignment drop-down menu under Layout in the Image 
Properties dialog box, and click OK. 

n^^B TextTextTextTexfTextText 
TextTextTextTexfTextText 
— TextTextTextTextTextText 

(If you set the alignment of an image to the left, the text will show in the right as shown in the 
example.) 

Creating hyperlinks on an image 

You can create hyperlinks not just on words, but also on images. An image can be used as a 
single hyperlink, or several regions of the image can each have a link. If you want more than 
one hyperlinks, use Hot Zone. By creating an image map, you can have different regions of an 
image each act as a hyperlink to a different document. To create an image map, you use the 
Image Toolbar to draw invisible hot zones on various parts of the image. Each hot zone acts as 
a hyperlink. 
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Using the Hyperlink Toolbar 

1. Select an image. 

2. Enter the target URL in the Hyperlink text box in the Hyperlink Toolbar and press <Enter>, or 
select one from the previously entered URLs from the drop-down menu. 









IWAVrVHKtCOTl 







3. Check if the link is valid in the Preview window. 

Using the Hyperlink dialog box 

1. Select an image. 

2. Select Hyperlink \W\ on the Standard Toolbar, or select the [Insert > Hyperlink...] menu 
command. 

3. In the Create Hyperlink dialog box, enter the URL in the URL text box and click OK. 

Q If you want to show the Hyperlink Toolbar, select the [View > Toolbars > Hyperlink] 
menu command. 

Creating rollover images 

You can create a rollover effect on an image. The image will be replaced by another image 
when the mouse-pointer is "rolled over" the image. 

Using the Action window 

1 . After selecting an image, click Add... in the Action window. 

2. In the Action Properties dialog box, select 'OnMouseOver' in the Event drop-down menu and 
'Replace Image' for the Action. 

3. Specify 'Original image name' and 'Replacement image path' under Parameters. 

4. Click OK. In the Action Properties dialog box, select 'OnMouseOut' in the Event drop-down menu 
and 'Restore Image' for the Action. 

5. Specify 'Image name' under Parameters. 

6. Click OK. 

Using the Image Properties dialog box 

1. Double-click an image and click Create Rollover... in the Image Properties dialog box. 

2. Enter a name in the Script Wizard - Rollover Effect dialog box. The name must begin with a letter 
and may only contain letters, numbers, and underscores (_). 

3. Enter file path and name for the image that will be used as the "rollover image" when the 
mouse-pointer is over the image. 

4. Click Finish. 

5. Click OK in the Image Properties dialog box. 
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Applying actions to an image 

An action is a set of JavaScript effects that are pre-designed by Namo WebEditor. You can 
apply actions to an image by specifying a mouse event that triggers an action to take place. 

1. Select an image 

2. Click Add... in the Action window. 

3. In the Action Properties dialog box, specify an action, the event that triggers it, and any 
parameters associated with the action. For detailed information about adding actions, refer to 
Action Properties. 

B9 Actions added to an image are listed in the Action Window. 
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Image Effects 



Setting the brightness/contrast/sharpness 

You can set the brightness/contrast/sharpness of the image while viewing the changes applied 
to the image in the Preview window. 

1. Select an image. 

2. Select the [Tools > Image Effects...] menu command, or click Image Effects on the Image 
Toolbar. 

3. Select from the followings in the Image Effects dialog box to modify image properties. 
[&] : Increases the brightness. 

\®\: Decreases the brightness. 
[aT| : Increases the contrast. 
[<i~| : Decreases the contrast. 
|~A~| : Increases the sharpness. 
|~6~| : Decreases the sharpness. 

4. Click OK and Filename dialog box will appear. 

5. Enter the path and name for the modified image file, or click Browse... to specify the file location. 

6. Select Save format and click OK. 

Q Values for Size, Brightness, Contrast, Sharpness is displayed in the bottom of the 
dialog box. 

Q Click Reset to cancel the modification and restore the original image. 

Q If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu 
command. 



Applying the bevel effect 

You can apply the bevel effect to an image. 
1. Select an image. 



Select the [Tools > Image Effects...] menu command, or click Image Effects m_ on the Image 
Toolbar. 



3. Click Bevel Effect y in the Image Effects dialog box. 

4. Specify properties in the Bevel dialog box. 

5. Click OK in the Bevel dialog box. 

6. Click OK in the Image Effects dialog box and Filename dialog box will appear. 
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7. Enter the path and name for the modified image file, or click Browse... to specify the file location. 

8. Select Save format and click OK. 



Original Flat Sinusoidal Circular 






m 



Applying the drop shadow effect 

You can make an image cast a shadow which gives it a raised appearance. Also specify a 
background color for the leftover area when making a shadow effect. It is suggested to select 
a matching background color for the document to which the image with a shadow effect will 
be inserted. 

1. Select an image. 

2. Select the [Tools > Image Effects...] menu command, or click Image Effects ^ on the Image 
Toolbar. 

Click Drop Shadow |W] in the Image Effects dialog box. 
Specify the drop shadow properties in the Drop Shadow dialog box. 
Click Ok in the Drop Shadow dialog box.. 
Click OK and the Filename dialog box will appear. 



Enter the path and name for the file, or click Browse... to specify the file location. 
Select Save format and click OK. 




Cutting images 

You can cut off a certain portion of images using Crop function. 

1. Select an image. 

2. Select the [Tools > Image Effects...] menu command, or click Image Effects 
Toolbar. 

3. Click Crop \u\ in the Image Effects dialog box. 

4. Choose one of the followings: 

• Drag the resize handles to specify the new image. 



on the Image 



Enter the desired values in H (Height) and W (Width) in the Imae Effects dialog box. 
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Specify the roundness of the cropped area by using □ ) o . Placing the adjustment 

button to the right makes the cropped area more round. 

If the image has roundness, specify background color for the left over area by using the Feather 
function. 

Enter a value for Feather to make the cropped borders blurry. The higher the value, the more 
blurry the borders become. 

Click Accept Crop/Resize [✓]. To cancel, click [x]. 

Q If you set the new image bigger than the original one, you can specify the background 
image for the blank area. 



Applying the frame effect 

You can add various frames to images. 

1. Select an image. 

2. Select the [Tools > Image Effects...] menu command, or click Image Effects |W] on the Image 
Toolbar. 

3. Click Add Frame [@] in the Image Effects dialog box. 

4. Specify the Width, Roundness, Color of the frame in the Frame dialog box. 

5. Click OK in the Frame dialog box. 

6. Click OK and Filename dialog box will appear. 

7. Enter the path and name for the modified image file, or select Browse... to specify the file location. 

8. Select Save format and click OK. 
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Saving images with transparent colors 

If the image that you want to insert in the document has a different background color than that 
of the document, you can synchronize the color by making the background color of the image 
transparent. If you click multiple spots, only the last selected color will change to be used as a 
transparent color. Select Interlace GIF to gradually sharpen the appearance of the image as it is 
loaded. 

1. Select an image. 

2. Select the [Tools > Set Transparent Color] menu command, or click Set Transparent Color 
on the Image Toolbar or in the Inspector. 

3. Click on a spot when the mouse-pointer changes into a dropper <f of which color that you want 
to make transparent. 

4. In the Save Image With Transparent Color dialog box, the color that is to be made transparent will 
be displayed. 

5. Specify the path and name of the new image file, and click OK. 

£3 If you select Interlaced GIF in the Save Image With Transparent Color dialog box, 
the image will be loaded by gradually clearing its appearance. 



4. 
5. 
6. 



on the Image 



Rotating images 

You can rotate or flip an image to the direction you desire. Flip Vertical flips the image upside 
down and Flip Horizontal left-side right. 

1. Select an image. 

2. Select the [Tools > Image Effects...] menu command, or click Image Effects 

Toolbar. 

3. Select from the followings to rotate the image. 
, : Rotates the image 90 degrees counterclockwise. 
, : Rotates the image 90 degrees clockwise. 

: Flips the image upside down. 
: Flips the image left-side right. 



5& 



Click OK and the Filename dialog box will appear. 

Enter the path and name for the file, or click Browse... to specify the file location. 
Select Save format and click OK. 



Original Image 
















MM 




m 
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Resizing images 

You can resize images using the Resize function in the Image Effects dialog box. 

1. Select an image. 

2. Select the [Tools > Image Effect] menu command, or click Image Effects ||] on the Image 
Toolbar. 

3. Click Resize in the Image Effects dialog box. 

4. Select one of the following methods: 

• Drag one of the 5 resize handles to resize the image. Dragging the handle while holding 
down the <Shift> key keeps the width/height ratio. 

• Enter the desired values in H (Height) and W (Width) in the Image Effects dialog box. 

5. Click Accept Crop/Resize [✓]. To cancel, click [x]. 

6. Click OK in the Image Effects dialog box and Filename dialog box will appear. 

7. Enter the path and name for the modified image file, or click Browse... to specify the file location. 

8. Select a Save format and click OK. 

H The Resize Scale width and height is displayed in the status bar at the bottom. 
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Creating an Image Map 



Creating a hot zone 

By creating an Image Map, you can have different regions of an image each act as a hyperlink 
to a different document. As you move the mouse over various areas of the image, the 
mouse-pointer changes to a hand, indicating that there is a hot zone under the mouse-pointer. 
If you were to click on a hot zone, you would be taken to a different document. 

1. Select an image. 

2. Select [Insert > Image Element > Image Map] or click the relevant button in the Inspector or on 

the Image Toolbar. 
[o] : Creates a circular hot zone. 
[□] : Creates a rectangular hot zone. 
Creates a Polygonal hot zone. 

3. The mouse-pointer will turn into a cross (+). 

4. Drag the mouse to specify the hot zone. 

5. Release the mouse button after specifying the hot zone. 

6. When you release the mouse button, the Create Hyperlink dialog box will appear, and you can 
enter the URL for the hot zone you just created. 

Modifying a hot zone 

You can modify the hot zone using Image Map. 

1 . Select an image that contains Image Map. 

2. Select the [Insert > Image > Image Map - Select or Edit Hot Zone] menu command or click 
Select or Edit Hot Zone on the Image Toolbar or in the Image Inspector. 

3. When you move the mouse-pointer over the image, the pointer turns into a hand when it's over a 
hot zone. To select a hot zone, just click once while the hand pointer is active. 

4. To move the hot zone to a new location, just drag it with the hand-shaped mouse-pointer. 

H If the Image Toolbar is not shown, select the [View > Toolbars > Image] menu 
command. 
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Photo Album 



Selecting files for Photo Album 

The Photo Album creation is made up of three simple steps: Photo Album - Select Files, Select 
Type, and Thumbnail Settings. In the first step of file selection, you should select the image 
files that will constitute a Photo Album. 

1. Select the [Tools >Create Photo Album...] menu command. You should save the current 
document first because it is impossible to create a Photo Album without saving the document. In 
case you have tried to create a Photo Album without saving the document, the message "Can't 
make the photo album because the current document is unsaved. Please save the file before 
making the photo album." appears. 

2. To add image files, take the following steps. 

• Click Add File.... Specify the files you want in the Open dialog box and click Open. 

• To add all the files in a specific folder, click Add Folder... and specify the folder you want 
and click OK. To include all the image files in the sub-folder of the specified folder you are 
to select, check Include subfolders. 

3. Filenames of the selected files appear in the Filename list box under Original image list. Click 
one file to see its preview in the Preview area in the right. 



Original image list: Preview 


Filename 








C:\narno\pic-photo ex1 trn2.jpg 




C:\namo\pic-photo ex2 trajpg 




C:\namo\pic-photo ex4 trajpg 
































Add File... | 














dd Folder... | 










nclude subfolders 














<i i >\ 


Cancel 


Number of selected images: 4 Up | Down | Remove 
Detail Settings ... | | Next> | 



4. To change the order of the files, select a file whose order should be changed and click the Up or 
Down button. 

5. To remove a file from the Filename list, select the file you want to remove and click Remove. 

6. After selecting all the image files you want, click the Next> button. The Photo Album - Select Type 
dialog box appears. 

Q You can select multiple files by clicking the filenames while holding down the <Ctrl> 
key or the <Shift> key. 

Q By clicking the Detail Settings. ..button, you can specify caption or save the file copies 
in a specified folder. 
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Selecting a layout style 

At the second step, Photo Album - Select Type , you can select the layout style of a Photo 
Album. 

1 . In the Photo Album - Select Type dialog box, select the Photo Album layout style from the Type 
drop-down menu. You can see the preview of the selected layout style in the preview area and the 
brief description of the type you have selected in Description. 

• Replace current window with full-size image 

Selecting this option lets you see the original image in the current browser window. 
Checking Create HTML document creates an HTML document containing the original 
image. Previous/Top/Next links are automatically inserted in each HTML document. 
Clicking Top leads you to the document containing thumbnails. Clicking Next/Previous 
leads you to the next/previous image. If you do not select Create HTML document, Photo 
Album will show the original image directly. 

• Show each full-size image in a new window 

Selecting this option lets you see the original image in a new browser window when you 
click a thumbnail. If you click another thumbnail, another browser window displaying the 
original image will open. The window size is adjusted to the size of each original image. 

• Show each full-size image in the same window 

Selecting this option lets you see the original image in a new browser window when you 
click a thumbnail. If you click another thumbnail, the same browser window will display 
the original image. 

• Show thumbnails and full-size images together 

Selecting this option lets you see the original image under the thumbnail list when you 
click a thumbnail. Clicking another thumbnail displays its original image replacing the 
previous original image. By default, the original image of the first thumbnail is displayed. 

• Show full-size images only (no thumbnails) 

If you select this option, no thumbnails will be created. Instead, the original images will be 
displayed. 

2. Select the option(s) you want in Settings. Setting options are different depending on the type you 
have selected in the Photo Album - Select Type dialog box. 

• Replace current window with full-size image 

You can specify Target Frame and Create HTML document. 

• Show each full-size image in a new window 

You can specify all the properties except Window size, Target Frame and Create HTML 
document. 

• Show each full-size image in the same window 

You can specify all the properties except Target Frame and Create HTML document. 

• Show thumbnails and full-size images together 

No option can be specified. 
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• Show full-size images only (no thumbnails) 

No option can be specified. 

3. You can arrange thumbnails in a table by checking Use table. Each thumbnail will be inserted in a 
cell, respectively. 




4. Click Next>. The Photo Album - Thumbnail Settings dialog box appears. If you have selected 
Show full-size images only (no thumbnails), click Finish. 

Q By clicking the Detail Settings. ..button, you can specify caption or save the file copies 
in a specified folder. 
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Thumbnail effect 

In Photo Album - Thumbnail Settings, the third step of Photo Album, you can specify the sizes 
of thumbnails and apply various effects. 

1 . Select the [Tools > Create Photo Album...] menu command. 

2. Take the first two steps of Photo Album creation such as Photo Album-Select Files, Photo 
Album-Select Type. 

3. In the Photo Album - Thumbnail Settings dialog box, choose one of the following. 

• To make all the thumbnails the same size, select Specify exact size and specify 
Width/Height of the thumbnails. If you want to keep the width/height ratio of the original 
images, select Constrain proportions. 

• To create thumbnails in a specific ratio to the original image size, select Specify 
percentage of original size and specify Percentage. 

4. Under Thumbnail Effect select the effect you want to apply to thumbnail images. 

5. Select the background color from the Bg Color Picker Pop-up. 

6. To apply shadow effect, check Drop Shadow and specify Color and Offset. To make the shadow 
borders blurry, set relevant values in Blur. 

7. Click Finish and the message 'Processing' appears as Photo Album creates thumbnail images. 



Creating photo album... B] 



Processing. 




Slop | 



13 By clicking the Detail Settings. ..button, you can specify captions or save the file 
copies in a specified folder. 

H When you have selected Use table in the Photo Album - Select Type dialog box, you 
can edit the inserted table as you do with the ordinary tables created by selecting the 
[Table > New Table...] menu command. 

Saving files 

You can specify the folder in which the original images, thumbnail images, and created 
HTML files can be saved. 

Saving copies of original images in the specified directory 

1. In the Photo Album dialog box, click the Detail settings... button. 

2. In the Photo Album Detail settings dialog box, click the Save tab. 

3. Select Save copies in the specified directory under Original Images. 
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4. Type the path of the folder in the Save in text box or click Browse... and specify the folder in which 
you want to save the copies of the original images. 

m 



Brov; 



OK | Cancel | 

5. Click OK. 

Saving thumbnail images in the specified directory 

1. In the Photo Album dialog box, click the Detail settings... button. 

2. In the Photo Album Detail settings dialog box, click the Save tab. 

3. Under Thumbnail Images, type the path of the folder in the Save in text box or click Browse... and 
specify the folder in which you want to save the thumbnail files. 

4. Select the thumbnail file format from the File format drop-down menu. 

5. Add prefix or suffix to the original image file names under Naming to name thumbnails. 

• Choose Prefix and enter the phrase to be added to front of the filename. 

• Choose suffix and enter the phrase to be added at the end of the filename. 

6. Click OK. 

Saving created HTML files in the specified directory 

1. In the Photo Album dialog box, click the Detail settings... button. 

2. In the Photo Album Detail settings dialog box, click the Save tab. 

3. Type the path of the folder in the Save in text box or click Browse... and specify the folder in which 
you want to save the created HTML documents. 

4. Add prefix or suffix to the original image names under Naming to name the newly created HTML 
files. 

• Choose Prefix and enter the phrase to be added to front of the filename. 

• Choose Suffix and enter the phrase to be added at the end of the filename. 

5. Click OK. 



Pholo Album Detail Sellings 



Save |captio» 
Original images 



V Save copies in the specified directory. 




S a ve in: J C: \D ocu m ents and S ett in gs\ veronbaAD esk top's 

Naming: |~~ prefix 

W suffix 
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Inserting captions 



You can easily add captions to thumbnails, such as filename, file size, number of order, etc. 

1. In the Photo Album dialog box, click the Detail Settings... button. 

2. In the Photo Album Detail settings dialog box, click the Captions tab. 

3. Select the Insert captions option under Caption Settings. 

4. Select the position of caption from the Caption position drop-down menu. 

5. Type captions in the Content text box or click [TT7J and select one of '&variable's from the drop 
down list. 

• Selecting Filename (&f) displays the filename in uppercase. 

• Selecting Extension (&e) displays the file extension in uppercase. 

• Selecting Image Size (&w) displays the image size in pixels. 

• Selecting File Size (&s) displays the file size plus its measure. 

• Selecting Creation Date (&d) displays the date of the image's latest modification, for 
example, '5-24-2001'. 

• Selecting Ordinal number (&n) displays the order of selection in Photo Album -Select 
Files step. Order of selection means the order in which image files were listed in the 
Photo Album - Select Files dialog box. 

• Selecting Line Break (&b) applies the line break where this tag is inserted. 



Pholo Album Delail Settings 



Save Captioi 



Caption Settings 



P Insert caption* 
Caption position: | 

Content: 



6. Click OK. 
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Inserting a Smart Button 



Inserting a Smart Button 

You can insert the Smart Button in the document. 
1 . Choose one of the followings to insert a Smart Button: 

• Select the [Insert > Smart Button...] menu command. 



Si ■ I ■ * 
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Click Insert Smart Button 



on the Standard Toolbar. 



• Click Insert Smart Button on the Image Toolbar. Select the [View > Toolbars > Image] 

menu command to show the Image Toolbar. 

• Select the [Window > Resource Manager...] menu command. Select the Smart Buttons 
tab of the Resource Manager. Select a Smart Button and click Insert. 

2. Click OK. 

3. The selected button is inserted to where the cursor is located. 

4. Click Finish. 

5. To edit the Smart Button in WebCanvas, double-click the button in the Edit window. 

Q When the document is saved, the Smart Button file will be saved with a name as 
'html file name+smartbutton serial number.gif. For example, supposed that the file name 
of html document in which the Smart Button is inserted is test.htm, the file names of the 
Smart Buttons will be "test_htm_smartbutton1.gif", "test_htm_smartbutton2.gif, and so 
on. 



Q Please refer to the WebCanvas Help for further details on using WebCanvas. 
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Editing a Smart Button 



You can modify the Smart Button inserted in a document. 

1. Double-click the Smart Button inserted in a document. 

2. WebCanvas is executed. 

3. Modify the button in WebCanvas. 

4. When finished, follow one of the methods: 



• Close WebCanvas. 

• Select the [File > Save] menu command in WebCanvas. 

• Move the Smart Button to WebEditor by dragging it from WebCavas to the Edit window of 



Namo WebEditor. 
5. The modified button appears in the Edit window. 

Resizing a Smart Button 

The Smart Button images are vector-based, which makes it possible to reduce or enlarge an 
image without any loss of its graphic quality. You can easily resize the Smart Button by 
dragging one of its resize handles. 

1 . Select a Smart Button. 

2. In order to reduce or enlarge the size of the Smart Button, drag its one of the resize handles while 
referring to size information of the Smart Button on the tool tip. 




3. 



Release the mouse button when the desired size is reached. 



©ool 



H You can edit the other properties of the Smart Button in WebCanvas by 
double-clicking the Smart Button. 
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Copying a Smart Button 



You can copy and modify a Smart Button inserted in a document. 

1. Click the Smart Button inserted in the document. 

2. Choose one of the following methods: 

• Press <Ctrl+C>. 

• Select the [Edit > Copy] menu command. 

• Select Copy on the Standard Toolbar. 

3. Place the cursor where you want to copy the Smart Button. 

4. Choose one of the following methods to paste the copied button: 

• Press <Ctrl+V>. 

• Select the [Edit > Paste] menu command. 

• Select Paste on the Standard Toolbar. 
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Managing a Smart Button 

You can manage the Smart Buttons using the Resource Manager. 

1. Select the [Window > Resource Manager...] menu command. 

2. Select the Smart Buttons tab of the Resource Manager. 

3. Select a folder in the category list located on the left side of the Resource Manager. 

4. Select one of the followings: 

• To modify the Smart Button in the Resource Manager, select {Modify} from the shortcut 
menu. 

• To delete the Smart Button, select {Delete} from the shortcut menu. 

• To change the Smart Button preview, select {Refresh} from the shortcut menu. 

• To add other Smart Buttons, select {Import File...} from the shortcut menu. 

• To modify an existing Smart Button and add it as a new button, select {Modify As New...} 
from the shortcut menu. 

H You can add a Smart Button you have created in WebCanvas simply by dragging the 
button to the Resource Manager. 

Q The Smart Buttons in the Resource Manager are updated automatically when 
modified in WebCanvas. 
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Compressing Smart Buttons 

You can compress the Smart Buttons into the *.zip file and send it to others such as 
co-workers working on a collaborative project. 

1. Select [Window > Resource Manager...] on the menu command. 

2. Open the Smart Buttons tab of the Resource Manager. 

3. Select the folder or group that you want to compress in category list on the left side. 

4. Select one of the following methods: 

• To compress a folder, select the [Menu > Zip...] menu command. 

• To compress a group, select the [Menu > Zip Group...] menu command. 

5. Type the file name and click Save in the Save as dialog box. 

Q To decompress the files, select the [Menu > Unzip...] menu command. 
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Converting a Smart Button to an ordinary image 



You can save a Smart Button image (*.npi, *.tng) as an ordinary image file (*.gif *.jpg *-jpeg 
*.png). 

1 . Right-click the Smart Button inserted in the Edit window and select {Image > Convert to Standard 
Image...} in the shortcut menu. 

2. The message "Converting the selected item to a standard image will remove editability of the 
item. Do you want to continue?" appears. Click Yes. 




Converting the selected item to a standard image will remove editability of the item. Do you want to continue? 



3. In the Save As dialog box, select a folder in which to save the converted image file. Enter a 
filename of the file (or just accept the default name), specify the file format from the drop-down list, 
and click Save. 

4. The message "The selected equation, chart, or Smart Button has been converted to a standard 
image" appears. 

5. Click OK. 

Q Converting a Smart Button image into a standard image will render it uneditable. 



160 | Chapter 10 



Working with Flash Buttons 



Inserting a Flash Button 

You can insert a Flash Button in the document. 

1 . Place the cursor where you want to insert a Flash Button. 

2. Select the [Insert > Flash Button...] menu command. 

3. Open a folder you want from the list in the left window of the Flash Buttons tab in the Resource 
Manager. 

4. Select a Flash Button in the preview pane in the right and click OK. 

5. Specify the button properties, such as width/height of the button, text, alignment, offset, font, link, 
target frame.and background color, in the Flash Button Properties dialog box and click OK. 

Q You can import any external Flash Buttons as well. Click Menu in the Flash Buttons 
tab of the Resource Manager and select Import File.... In the Open dialog box, select the 
file you want to import and click Open. The selected Flash Button is inserted in the 
current folder. 

Changing the text of a Flash Button 

You can modify the contents, font type and font size of the text of a Flash Button. 

1. Double-click the Flash Button inserted in the document. 

2. Re-enter the text you want to be insert in the Flash Button in the Text text box in the Flash Button 
Properties dialog box. 

3. Specify the font type, font size you want from the Font and Size drop-down list. 

4. Click OK. 

Modifying the link of a Flash Button 

You can modify properties of the link, such as URL and Target frame, applied to a Flash 
Button. 

1. Double-click the Flash Button inserted in the document. 

2. The Flash Button Properties dialog box appears. 

3. Re-enter the file path or URL hyperlinked to the Flash Button in the Link text box under Hyperlink. 

4. Re-specify the target frame properties from the Target drop-down menu. 

5. Click OK. 
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Chapter 11 

Tables 

Table Overview 
Creating Tables 
Selecting Tables 
Modifying Tables 
Converting Tables 



Tables are a crucial part of most Web sites. Namo WebEditor includes a complete set 
of tools for creating editing and manipulating these keys components. 



Table Overview 



Tables in Web Documents 

Tables in a Web document play two very important roles, as outlined below. 
As a method to narrate information 

A table is often used to narrate information. A timetable is a good example where a table 
is used for this purpose. The data organized in a table is easy to read and can be 
conveniently processed. The information contained in a table can be viewed in various 
ways by sorting, converting between text and table, or by using the Chart Wizard. 

As a gridline for the document layout 

The gridlines of the table, which are used to create the table's layout, appear as dotted 
lines in the Edit window. However, they are not visible in a browser. 

Table/ Cell/Row Properties 

Table Properties are applied only to the table, Cell Properties to the cell and Row Properties 

to a table row. Using those properties, you can edit the table in various forms. 



Table Properties 


Table size 




Table layout 




Cell padding 




Cell spacing 




Table borders 




Table background 




Table caption 


Cell Properties 


Cell size 




Cell alignment 




Cell borders 




Cell background 


Row Properties 


Row size 




Row alignment 




Row border color 




Row background color 
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Working with Tables in Namo WebEditor 

When working with tables in Namo WebEditor, it is more convenient to use the Table 
Inspector. 

Table Inspector 

The Table Inspector is made up of frequently used dialog box items and related buttons, 
and is activated when you select or place the cursor inside a table. 



» Table 




r Width: | ^ fi ^ 

T Height:( jjj [pixeh \ 

Spacing: | ^ Align; 

Padding: | 3 | (default) 3 



Border: |i ^ | 




Table Toolbar 

The Table Toolbar provides shortcuts for several commonly used functions related to 
tables. To show the Table Toolbar, select the [View > Toolbars > Table] menu command. 



1 Table 


HI 




mm a& 
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H By dragging and docking the Table Toolbar anywhere outside the Edit window, it will 
show whenever the program starts, just like the Standard Toolbar. 



Show/Hide Table Gridlines 

If you click Show/Hide Table Gridlines [Ml on the Standard Toolbar (or select the [View > 
Marks > Table Gridlines] menu command), a table with '0' border thickness will appear 
with gray dotted lines in the Edit window. If the Current Table ([View > Marks > Current 
Table]) option is also selected, the blue outline will appear as the table's outside border 
along with the gray dotted lines. To hide the blue outline, showing only the gray dotted 
lines, deselect Current Table option while leaving the Table Gridlines option selected. To 
show only the blue outline, select Current Table and deselect Table Gridlines. If you 
deselect both options, none will appear in the Edit window. 

Q The Current Table option is selected by default. 
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Current Table 



If you select Current Table by selecting the [View > Marks > Current Table] menu command, 
the table containing the cursor will appear with a blue outline as the table's outside border. 
To hide the blue outline, showing only the gray dotted lines, deselect the Current Table 
option while leaving the Table Gridlines option selected. To show only the blue outline, 
select Current Table and deselect Table Gridlines. If you deselect both options, none will 
appear in the Edit window. 









c 


^Cursor 





























Table with '0' Table containing 
border thickness the cursor 



H The Current Table option is selected by default. 
Table Style 

You can save various styles of table for later use. You can select and apply the 
ready-made table style to any table inserted in a Web document. To apply a table style, 
place the cursor inside the table and open the Resource Manager by selecting the [Window 
> Resource Manager...] menu command. In the Resource Manager window, click the Table 
Styles tab, choose the table style you want, and click Apply. 

Cell size pop-up description 

If you drag a cell border to modify the cell size, a pop-up description appears showing 
the size of the cell that is being modified. The pop-up description shows the size of a cell 
to the left of borderline being dragged in 'pixel(%)\ 
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Creating Tables 



Creating a table 

You can create a table rapidly using the Table Toolbar. You can create various types of tables 
by specifying horizontal/vertical border properties, background image and color, etc. 

Creating a table using mouse 

1. Click Create Table 



on the Standard Toolbar. 



to select the number 



Click and drag on the miniature table that appears below Create Table 
of rows and columns that you want to have in your table. The rows and columns of the table to be 
created is displayed in the form of number of rows x number of columns (e.g. 3 X 4) at the bottom. 



rr 



nn 

3x3 



Click again when the desired table size and shape is blocked in the blue area. 
Q To cancel creating the table, click again on Create Table 



Creating a detailed table using Table Properties dialog box 

1 . Select the [Table > New Table...] menu command. 

2. Specify the size of the table that you want to create in the Table tab of the Table Properties dialog 
box. 

3. Specify the layout, borders and/or background properties of the table and click OK. 



Drawing a table 

You can create a table, as you draw it with a pencil, using the Table Toolbar. Using Draw Table 
command lets you create a table with its cell numbers undefined. You can also edit an existing 
table using Draw Table function. You can draw a table in freehand by using the Table Toolbar. 

1. Select the [Table > Draw Table] menu command or click Table Pencil [1FJ on the Table Toolbar. 

2. Click and drag anywhere in the Edit window to create the table's outline. 



i 

3. Click and drag inside the table outline to draw row and column borders, if necessary. 



Q To escape from the Table Pencil mode, click Escape Table Drawing Mode [V] on 

the Table Toolbar or press the <Esc> key. 
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Creating a child table 

You can insert a table within an existing table. In this case, the table inserted is called 'child 
table'. You can create a child table by inserting a new table or copying and pasting a part of an 
existing table inside a certain cell. 

Creating a new child table 

1 . Place the cursor within the cell where the child table will be inserted. 



2. Select the [Table > New table...] menu command. 

3. Specify the Size, Layout, Borders and Background attributes of the table in the Table tab of the 
Table Properties dialog box. 



Q You can also create a new child table by clicking Create Table H on the Standard 
Toolbar, or clicking Table Pencil [©] on the Table Toolbar. 

Pasting as a child table 

1 . Select the block of cells. 

2. Click Copy | on the Standard Toolbar or press the shortcut key <Ctrl + C>. 

3. Click inside the cell where the child table is to be inserted. 

4. Click Paste 



on the Standard Toolbar or press the shortcut key <Ctrl + V>. 



5. In the Paste Table dialog box, choose Insert as a child table and click OK. 
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Selecting Tables 



Selecting cells 

You can select one or multiple cells to modify the cell properties. You can easily select 
multiple cells using <Ctrl> or <Shift> key. 

Selecting one cell 

1 . Place the cursor within the cell. 

2. Select the [Table > Select > Current Cell] menu command or select {Select Cell} in the shortcut 
menu. 

Selecting multiple cells 

1. Select one cell. 



I 



□□□ 



2. Select other cells while holding down the <Shift> key and all cells in-between will be selected. 
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Q To select several cells that are not next to each other or not in block, click inside each 
cell while holding down the <Ctrl> key. 

Q To select adjacent cells or a continuous block of cells, click-hold inside the first cell 
and drag the mouse-pointer to the last desired cell. 



Selecting a row or column 

You can select a specific row or column in a table and modify its properties. There are several 
ways to select a row or column. 

1 . Place the cursor inside the cell. 

2. Select the [Table > Select > Current Row] or [Table > Select > Current Column] menu command. 

□□□□ 

E) Place the mouse-pointer at the left edge of the row. While the mouse-pointer appears 
as a small rightward-pointing arrow click once to select an entire row. 

Q Place the mouse-pointer at the top edge of the column. While the mouse-pointer 
appears as a small downward-pointing arrow J, , click once to select an entire column. 
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H You can also click and drag to select multiple adjacent rows or columns by selecting 
the first row or column, then selecting additional rows or columns while holding down the 
<Ctrl> key. 

Q You can also select an entire row or column by clicking inside the first cell (the top left 
cell) and dragging it to the last cell(the bottom right cell) in the row or column. 



Selecting a table 

You can select a whole table and modify its properties. 

1 . Place the cursor anywhere within the table that you want to select. 
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2. The blue outline defining the table will appear. 

3. Select the [Table > Select > Table] menu command or choose {Select Table} in the shortcut 
menu. 




Q You can select the table by placing the cursor inside the table and pressing the 
shortcut key <Alt + Shift + T>. 

E3 You can also select the table by clicking the first cell and dragging it to the last cell at 
the bottom right of the table. 
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Modifying Tables 



Aligning table/row/cells 

You can align a table to the left, right, center of a document. You can also align contents in a 
cell. 

Align table 

1 . Place the cursor inside the table that you want to align. 

2. Select one of the following two methods. 

• Select alignment of a table from Align drop-down menu of the Table Inspector. 

• Select the [Table > Table Properties...] menu command, or click Table Properties [M] on 
the Table Toolbar. In the Table Properties dialog box, change the Alignment and click 
OK. 

Align contents of the cell 

You can align the contents of a cell by placing the cursor inside the cell. You can also select 
multiple cells for alignment. 

1 . Place the cursor inside the cell containing the contents that you want to align. 

2. Select one of the following two methods. 



• Click the Cell tab of Table Inspector and set the alignment of contents using 
horizontal/vertical alignment buttons. 




Align contents of a row 

1 . Place the cursor inside the row whose contents should be aligned. 

2. Select one of the following two methods. 

• Click the Row tab of Table Inspector and set the alignment of contents using 
horizontal/vertical alignment icons. 

• Select the [Table > Row Properties...] menu command. Specify the Vertical/Horizontal 
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Specifying the height of a row 

You can specify the height of a specific row in a table. 

1 . Place the cursor anywhere in the row whose height should be adjusted. 

2. Select one of the following: 

• Specify Height in the Row tab in the Table Inspector. 

• Select the [Table > Row Properties...] menu command. At the Row tab in the Table 
Properties dialog box, specify Height and click OK. 

Inserting rows or columns 

You can add a column or row to an existing table. You can also copy and paste columns or 
rows of a table to another table in case the number of columns or rows of two tables are equal. 

Inserting a new line 

1 . Place the cursor where that you want to insert rows or columns. 

2. Select one of the following methods. 

• Click Insert Rows/Columns [Jt] on the Table Toolbar or in the Table tab of the Table 
Inspector. 

• Select the [Table > Insert Rows or Columns...] menu command. 

3. In the Insert Rows or Columns dialog box, specify whether to insert columns or rows, the number 
that you want to insert, and whether to insert them before or after the row or column containing the 
cursor. 

Copying and pasting parts of a table 

You can cut or copy entire rows or columns and paste them before or after another row or 
column in the same table, or into a different table. 

1 . Select the rows or columns to copy. 

2. Select {Copy} in the shortcut menu or press the shortcut key <Ctrl+C>. 

3. Place the cursor where that you want to paste the copied rows or columns. 

4. Select {Paste} in the shortcut menu or press the shortcut key <Ctrl+V>. 

5. In the Paste Table dialog box, specify the manner of inserting the copied rows or columns by 
selecting relevant options and click OK. 
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Deleting rows or columns 

You can delete rows or columns of a table. 

1 . Place the cursor inside the cell that you want to delete. 

2. Select the [Table > Delete Rows or Columns...] menu command. 

3. In the Delete Row or Columns dialog box, first specify whether to delete rows or columns. Then 
specify the number to delete, and whether to delete them before or after the row or column where 
the cursor is currently located. 

H After selecting the relevant rows or columns, press the <Del> key to delete the 
selected area, or press the shortcut key <Ctrl + Shift + Y> to delete only the contents of 
the selected area. 



Deleting a table 

You can select and delete an entire table or remove the borders inside a table using the Table 
Toolbar. 

Deleting the entire table 

1 . Place the cursor anywhere inside the table to be deleted. 

2. Select the [Table > Select > Table] menu command or choose {Select Table} in the shortcut 
menu. 

3. Press the <Del> key. 

Q You can also delete the table by selecting the first cell(the top left cell) and dragging 
the mouse-pointer over the entire table, and pressing the <Del> key. 



Deleting the table border 

1 . Click the Table Eraser <o? on the Table Toolbar or in the Table tab of the Table Inspector. (To 
display the Table Toolbar, select the [View > Toolbars > Table] menu command. 

2. The mouse-pointer turns into an eraser,^ . 

3. Click-hold next to the cell border that you want to erase, then drag the eraser across the border. 

4. When the border turns red, release the mouse button to remove the border. 



H To escape from the Table Eraser mode, click Escape Table Drawing Mode [k\ on 
the Table Toolbar or in the Table tab of the Table Inspector, or press the <Esc> key. 
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Splitting cell(s) 

You can divide a cell into multiple cells. 



Splitting cells 

1 . Select the cells to be split. 

2. Select one of the following methods: 



• Select the [Table > Split Cell...] menu command. 



• Click Split Cell 51 on the Table Toolbar or in the Cell tab of the Table Inspector. 



3. In the Split Cell dialog box, specify whether to split the cells into rows or columns and determine 
the number of rows or columns to split each cell into, and click OK. 

Splitting cells using the Table Pencil 

1 . Place the cursor anywhere within the table. 

2. Select one of the following methods. 



3. When the mouse appears as a pencil $ draw a line inside the cell borders to split the cell. 



Merging cells 

You can merge adjacent cells into one cell. Merge Cells does not get activated when you have 
selected cells which are not adjacent. 

Merging cells 

1 . Select 2 or more cells to be merged. 

2. Select one of the following methods. 



• Click Table Pencil 




on the Table Toolbar or in the Table tab of Table Inspector. 



• Select the [Table > Draw Table] menu command. 



• Click Merge Cells 




in the Cell tab of the Table Inspector. 



• Select the [Table > Merge Cells] menu command. 



Q It is not possible to merge a group of cells that do not make up a rectangular block. 
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Changing the table/cell borders 

You can apply various effects to a table by modifying table and cell border properties, such as 
border thickness or color. You can apply three-dimensional effect to a table by setting 
different border colors to thin and thick borders. 

Table borders 

1 . Place the cursor anywhere inside the table. 

2. Select one of the following methods. 

• Click one of Normal/Thin/Thick/Hide Borders icon in the Table tab of Table Inspector. 

• Select an option from the [Table > Borders > Normal/Thin/Thick/Hide] menu commands. 

H When Hide is selected, borders become invisible in the browser. However, they will 
be appear as dotted lines in the Edit window. 

Changing the table border properties 

1 . Place the cursor inside the table. 

2. Select one of the following methods. 

• Specify the thickness and color of table borders in the Table tab of Table Inspector. 

• Select the [Table > Table Properties...] menu command or click Table Properties [||] on 
the Table Toolbar. Specify Type, Thickness, and Color for Borders in the Table 
properties dialog box and click OK. 

H You can change the colors of cell borders by choosing a color for Borders in the Cell 
properties dialog box. 

CSS style borders 

Cell borders can be edited in various ways using CSS-style. 

1 . Select which cell borders to modify. 

2. Click Cell borders [ffl] on the Table Toolbar or select the [Table > Borders > Cell borders...] 

menu command. 

3. When the dialog box appears asking whether to change the borders to CSS-style borders, click 
Yes. 

4. Specify Borders, Style, Color, and Thickness in the Border Settings dialog box and click OK. 
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Resizing the table 

You can easily resize a table by clicking the table border and dragging it to the point you want. 
You can also resize a table by specifying width and height of the table directly in the Table tab 
of the Table Properties dialog box. 

H You can specify the width and height of a table in pixel or in a percentage (%) of a 
browser window. 



Fixing the table size 

If you insert a table and adjust your browser window, the table gets wider or narrower 
according to the browser size. You can fix a table size by setting a table size in pixel in the 
Table tab of the Table Properties dialog box. 
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Fixing a document size using a table 

1 . Select the [Table > New Table...] menu command. 

2. In the Table tab of the Table Properties dialog box, enter 1 both in Rows and in Columns. 

Size 

Rows: [l ~Fj 

Columns: Jl 

3. In the Table tab of the Table Properties dialog box, check Width and Height. Enter the size you 
want and check pixel radio buttons. 
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4. Set Thickness to '0' and click OK. 

Borders 

Type: | Normal 

Thickness: |o ^ 

5. Edit the document by inserting text or images in the table. 

6. Check if the document size has been fixed by selecting the [View > View with Internet 
Explorer/Netscape] menu command and changing your browser window size. 
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Setting the size of the cells 

You can set the size of cells within a table. You can set cell properties, such as cell width or 
height, to default. You can also select multiple cells and make their height or width the same. 
Using Apply Visible Cell Attributes lets you recover the excessive reduction, expansion, and 
deletion of cells. 

Clear All Width (or Height) Attributes 

1 . Place the cursor anywhere inside the table. 

2. Select the [Table > Cell Size > Clear All Width Attributes] or [Table > Cell Size > Clear All Height 
Attributes] menu command. 

Equalize Cell Width (or Height) 

1 . Select at least two cells to equalize their widths (or heights). 

2. Select one of the following methods. 

• Click Equalize Cell Width [ffl] or Equalize Cell Height [M] in the Cell tab of the Table 
Inspector. 

• Select the [Table > Cell Size > Equalize Cell Width] or [Table > Cell Size > Equalize Cell 
Height] menu command. 

Inserting/Removing a caption 

You can insert a caption, explaining contents of a table or dividing different tables, in a table. 
You can change the position of a caption or apply various formats to a caption. 

Inserting a caption 

You can add a title to the table by inserting a caption. 

1 . Place the cursor anywhere within the table. 

2. Select the [Table > Caption > Insert Caption] menu command. 

3. Type the caption. 
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Changing the position of the caption 

1 . Place the cursor inside the table where that you want the caption to be inserted. 

2. Select the [Table > Table Properties...] menu command or click Table Properties 

Table Toolbar. 



on the 



3. In the Table tab of the Table Properties dialog box, select a location for the caption using the 
Table caption drop-down menu under Layout and click OK. 

H To delete a table caption, place the cursor anywhere inside the table and select the 
[Table > Caption > Delete Caption] menu command. 



Changing the background for the table/cell/row 

You can apply background effect to an entire table, individual cells, or a table row. You can 
apply background color or image to a table or cell(s), or a table row. If you have applied the 
table background color, row background color, and cell background color at the same time, 
cell background will take the precedence, and then the row color, table color in turn. 

Changing the background for the table 

You can specify a background color or insert an image to use as a background image for the 
table. 

1 . Place the cursor inside the table. 

2. Choose one of the following two methods. 

• Specify background image or background color in the Table tab of Table Inspector. 

• Select the [Table > Table properties...] menu command or click Table properties on 
the Table Toolbar. Specify Color or Image in the Table tab of Table properties dialog box 
and click OK. 

Changing the background for the cells 

1 . Place the cursor inside the cell. To change the background of more than two cells, first select the 
cells. 

2. Choose one of the following three methods. 

• Specify background image or background color in the Cell tab of Table Inspector. 

on the 



Select the [Table > Cell properties...] menu command or click Cell properties 
Table Toolbar. Specify Color or Image in the Cell tab of the Table Properties dialog box 
and click OK. 

To quickly change the background color of cells, first select the cells and click Change 
Cell Background Color \& ~| on the Table Toolbar. Specify the color you want in the 
Color Picker Pop-up. 
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Q When both cell and table background colors are specified, the cell background color 
will change first. 

Changing the background for the table rows 

1 . Place the cursor inside the cell. 

2. Choose one of the following methods. 

• Specify background color in the Row tab of Table Inspector. 

• To quickly change the background color of a row, first select the row and click Change 
Cell Background Color [fo ^| on the Table Toolbar. Specify the color you want in the 
Color Picker Pop-up. 

• Select the [Table > Row Properties...] menu command. In the Row tab of the Table 
Properties dialog box, specify the Background Color. 

Copying and pasting attributes of the cell 

You can copy and paste attributes of a cell to other cells in the same table or another table 
using the Copy Format menu. 

1 . Place the cursor within the cell containing attributes that you want to copy. 

2. Select the [Edit > Copy Format...] menu command, or press the shortcut key <Shift + F2>. 

3. In the Copy Format dialog box, select the types of formatting attributes to copy and click OK. If 
you want to copy all the attributes of the cell, select All attributes at the bottom. 

4. Select the cell to which that you want to paste the copied format. 

5. Select the [Edit > Paste Format] menu command or press the shortcut key <F2>. 

6. The copied attributes will be applied. 

Q In case you have copied the background color properties, the Paste Format dialog 
box sometimes appears asking the range of application. 

Deleting contents of the cells 

You can delete the contents of the selected cells while leaving the table unchanged. 

1 . Select the cells with contents that you want to delete by holding down the <Ctrl> key and clicking 
on each of the cells that you want to clear. 

2. Select the [Table > Delete Contents] menu command. 

3. Contents of the selected cells will be deleted. 

Q After selecting the cells, press the shortcut key <Ctrl + Shift + Y> to quickly delete the 
contents. 
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Splitting the table 

You can split a table into two tables. Note that The rows below the row containing the 
insertion point will be split off into a new table. 

1 . Place the cursor at the point where that you want to split the table. 



2. Select the [Table > Utilities > Split Table] menu command. 



Q The row right below the cursor will split into a new table. Therefore, place the cursor 
above the desired breaking point. 

Q After selecting a row, you can drag it anywhere outside the table and release the 
mouse. It will then split and appear as a new table. 



Merging tables 

You can merge two different tables. To merge two tables, two tables should be adjacent and 
have the same number of horizontal cells. 

1 . Place the cursor anywhere within the upper table. 

2. Select the [Table > Utilities > Merge Tables] menu command. 

Q The blue outline defining the table in the Edit window lets you verify whether the 
tables have been merged into one. 
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Applying table styles 

You can easily and rapidly modify table properties by applying built-in table styles to tables. 
You can also apply different cell properties or table properties even after you have applied a 
table style. 

1 . Place the cursor inside a table to which you want to apply a table style. 

2. Select the [Table > Table Style...] menu command or [Window > Resource Manager...] menu 
command and click the Table Styles tab. 

3. Take one of the following methods: 

• Select a category folder in the left list and click the table style you want in the right window. 
Click Apply. 

• Select a category folder in the left list and click the table style you want. Drag the table 
style over the table containing the cursor to which the table style should be applied. The 
mouse shape turns into a small grey rectangle with a '+' sign. Release the mouse button 
and select {Apply Table Style} in the shortcut menu. 

Transposing a table 

You can transpose columns and rows in a table. 
1 . Place the cursor inside the table. 
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2. Select the [Table > Utilities > Transpose Table] menu command. 
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Converting Tables 



Converting text to table 

You can convert character strings to a table in case the string is divided by relevant delimiters. 
Delimiters refer to a symbol by which a set of string is divided into each cell. Paragraph and 
<BR> tag, space, comma can be used as a delimiter. You can also specify other symbol as a 
delimiter. Selecting No delimiters (insert everything in one cell) creates a table containing all the 
selected data in one cell. 

1 . Select the text to convert into a table. 



222 333 444 555 666 777 888 99 



2. Select the [Table > Utilities > Convert Text to Table...] menu command. 

3. In the Convert Text to Table dialog box, specify the number of rows and columns for the new table 
under Table size. 

4. Choose a Delimiter and click OK. 
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Converting table to text 

You can convert a table to text string. 

1 . Place the cursor anywhere inside the table. 

2. Select the [Table > Utilities > Convert Table to Text] menu command. 
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Creating a chart 

You can create a chart based on a table using the Chart Wizard. 

1 . Place the cursor anywhere within the table. 

2. Select one of the following methods. 

• Click Create Chart 



on the Table Toolbar. 
• Select the [Insert > Other > Chart...] menu command. 
When the Chart Wizard is activated, proceed with the steps provided. 
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H You can change a chart into an image by clicking the chart and selecting {Image > 
Convert to Standard Image...} in the shortcut menu. In this case, the chart loses its 
editable properties. 



Sorting tables 

You can sort data within a table according to the column you have selected. However, you 
cannot sort data of a table created by merging cells because of the irregularities of the cells. 

Sorting the contents of the table 

1 . Place the cursor anywhere inside the table that you want to sort. 
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2. Select one of the following methods. 

• Click Sort Table [^1] on the Table Toolbar or in the Cell tab of Table Inspector. 

• Select the [Table > Utilities > Sort...] menu command. 

3. In the Sort dialog box, specify the sort type and desired options, and click OK. 
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H To sort only specified cells, select a part of the table that you want to sort and choose 
the Sort selected cells only option in the Sort dialog box. 
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Importing spreadsheet into a table 

You can import a Spreadsheet file as a table with Namo WebEditor. 

1 . Select the [Insert > Other > Spreadsheet...] menu command. 

2. In the Spreadsheet dialog box, click Browse... under Source, select Excel file and click Open. 
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3. Select the relevant option under Insertion method. 

4. Click OK. 
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Q Microsoft Excel must be installed on your computer in order to use this feature. 

Q If you select Link to original spreadsheet, the table contents are automatically 
updated in the Edit window after the table is edited and the Excel document is closed. 
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Chapter 12 

Layout Tables 

Layout Tables 
Working with Layout Tables 
Working with Layout Cells 



Use Layout Tables to position text, graphics, and other page elements with drag and drop 
ease, eliminating the need to manually create tables for page layout. 



Layout Tables 



What is a Layout Table? 

Table and layout table 

Tables are used not only to show a series of data but also to design layouts of Web 
documents. However, designing a layout using tables demands a good understanding of 
tables and table tags, and requires a lot of time and effort. However, it still causes 
difficulties when designing complex layouts. A Layout table is a type of table, designed 
for designing layouts using tables. A layout table uses table tags in the HTML source 
code but it works more like layers; you can freely insert or move an object to any 
position within the layout table by the drag and drop method. 

Layout table 

A layout table is a rectangular area in which you can draw boxes called layout cells. You 
can draw as many layout cells as desired until the whole area is filled. You can move, 
resize, and remove any layout cells that you want. For easier control, you can use the 
Snap option to resize or change the position of a layout cell according to the grid. The 
Snap option attracts nearby objects to the grid. Grids are visible only in the Edit window. 

You can insert text, table, or images in a layout cell, as you do in an ordinary cell of a 
table. You can also apply a background image or background color, as well as specify cell 
margins or borders of a layout cell. Objects inserted in layout cells can also be easily 
aligned. 

A layout table consists of HTML elements such as TR, TD, Colspan, Rowspan, all of 
which constitute an ordinary table. Accordingly, a layout table can be converted into a 
table, and a layout cell into a cell. Conversely, you can convert a table into a layout table. 

You should take the following matters into consideration when working with a layout 
table. 

• You cannot drag an object out of the layout table area. 

• You cannot overlap multiple objects in a layout table. 

• If you place an object on the border of a layout table, the size of the layout table will be 
adjusted to such an extent that the layout table can include the inserted object. 

• The Snap function applied to a document is not applied to the content of a layout table. 
You should select the Snap option in the Layout Table Properties dialog box to apply the 
Snap function to the contents in a layout table. 

• If you activate Snap by selecting the Snap option in the Layout Table Properties dialog 
box, an object inside the layout table moves by the grid. 
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Working with Layout Tables in Namo WebEditor 



Layout table and HTML tags 

You can insert a layout table using the Layout Table Properties dialog box or Draw Layout 

Table O. Inserting a layout table creates the following HTML tags. 

e.g., <tabie border="0" cellpadding="0" cellspacing="0" width="101" 
height="101" namo_layoutboae="10,l,l,10,l,l">. . . . </table> 

A layout table, created in the Edit window, is coded as table in the HTML source. A 
layout cell inside a layout table is coded as a cell. Accordingly, the properties of a layout 
table or a layout cell are equivalent to those of a table or a cell. 

Layout Table and Grid 

You can specify the properties of the grid, displayed in a layout table, in the Layout Table 
Properties dialog box. 

Horizontal/Vertical: You can specify the spacing of horizontal and vertical gridlines. 
Snap: Snaps a layout cell to the nearest horizontal and vertical gridlines. 
Visible: Decides whether gridlines should be visible or not. 

Grids and Snap settings of layout tables overrides the document's grids and Snap; layout 
cells are snapped to grids of the layout table, rather than grids of the document. 

Converting a layout table into a table 

Checking the HTML source in the HTML tab, you can see that a layout table has the same 
properties as a table. A layout table in the Edit window is a table, a layout cell is a cell. 
Accordingly, a layout table can be converted into a table, a layout cell into a cell. 
Conversely, you can convert a table into a layout table. 
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Working with Layout Cells in Namo WebEditor 



Layout cell and HTML tags 

You can create a layout cell using Draw Layout Cell [Ml on the Layout Table Toolbar. 
Inserting a layout cell creates the following HTML tags in the HTML tab. 

e.g., <tableborder="0" cellpadding="0" cellspacing="0" width="101" 
height="101" namo_layoutbox="10, 1,1, 10,1,1"> 

<tr> 

<td namo_textbox="0, 0, 0,0, 0, 0, 0, 0, 0, 0" > 

</td> 
</tr>. . . 
</table> 

A layout table, created in the Edit window, is a table. A layout cell inside a layout table is 
a cell. Accordingly, the properties of a layout table or a layout cell are equivalent to those 
of a table or a cell. 

Working with multiple layout cells 

If you want to align, or set the size or spacing of multiple layout cells, use the Layout 
Toolbox. Select the layout cells whose properties should be modified by clicking them 
while pressing the <Shift> key and click the relevant tool buttons. The last selected 
layout cell works as the basis of the cell alignment. 

Inserting objects in a layout cell 

You can insert the same objects into a layout cell as those which can be inserted in a cell 
of a table. When moving or drawing a layout cell, overlapping a layout cell with another 
object will turn your mouse-pointer into 0. Generally, you cannot overlap a layout cell 
with other inserted objects. If you activate Snap by selecting the Snap option in the 
Layout Table Properties dialog box, the layout cell will be drawn according to the grids. 
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Working with Layout Tables 



Inserting a layout table 

You can insert a layout table using the Layout Table Properties dialog box or drawing the 
layout table directly. 

Using the Layout Table Properties dialog box 

1. Select the [Table > Layout Table > New Layout Table...] menu command. 

2. In the Layout Table Properties dialog box, specify the properties of the layout table and click OK. 

3. A layout table is inserted where the cursor is located. 

Drawing a layout table directly 

1. Select the [ Table > Layout Table > Draw Layout Table...] menu command, or click Draw Layout 
Table (□] on the Layout Table Toolbar. 

2. When the mouse-pointer turns into -|- , draw a layout table by dragging. The size of a layout table 
is displayed in a yellow pop-up description, which enables you to create a layout table to the exact 
size you want. 

3. Release the mouse button. A layout table is created. 



(A layout table with 40 pixels of width/height) 

H To escape from the Draw Layout Table mode, press the <Esc> key or right-click the 
mouse button. 

H To show the Layout Table Toolbar, select the [View > Toolbars > Layout Table] menu 
command. 
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Decorating the background of a layout table 

You can decorate a layout table by inserting a background image or applying a background 
color. In case you have applied the background image or color to both the layout table and 
cells, background image or color applied to the layout cells take the precedence. 

1 . Double-click a layout table or select {Layout Table Properties...} in the shortcut menu. 

2. In the Layout Table Properties dialog box, specify the background image and color. 

3. Click OK. 



-JEHL. 
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(Example of a background image inserted in a layout table. The image 'bicycle_blue.gif was selected 
in the Clip Arts tab of the Resource Manager.) 

Q If the background image is bigger than the layout table, the image will be cropped to 
fit in. If the background image is smaller than a layout table, the image is displayed 
repeatedly as a checkerboard. 



Converting a layout table to a table 

You can convert a layout table to an ordinary table. This conversion makes a layout table a 
table, a layout cell a cell. 

1 . Select a layout table by clicking anywhere inside the layout table. If the layout table is selected, the 
resize handles on the border of the layout table will appear. 

2. Select the [Table > Layout Table > Convert Layout Table to Table] menu command. 

3. The layout table is converted to a table, layout cells to cells. 



Deleting a layout table 

You can delete a layout table using the <Del> key. If you want to cancel deleting, press the 
shortcut key <Ctrl+Z> or click Undo 0 on the Standard Toolbar. 

1 . Click anywhere inside the layout table or place the cursor before the layout table. 

2. Press the <Del> key. A message "Do you want to delete the selected layout table?" appears. 




3. Click Yes to delete the selected layout table. 
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Modifying grid properties of a layout table 

You can modify the grid properties of a layout table. You can specify the vertical/horizontal 
grid spacing and visibility. You can also activate or deactivate the Snap option. 

1 . Double-click a layout table, or click to select a layout table and then select the [Table > Layout 
Table > Layout Table Property...] menu command. 

2. The Layout Table Properties dialog box appears. 

• To adjust the grid spacing, modify the values in Horizontal and Vertical under Grid. 

• Deselect Snap to inactivate the snap function which attracts layout cells to grids. 

• To make grid invisible, deselect Visible. 

3. Click OK. 



Spacing 10 Spacing 20 

(Example of changing Horizontal/Vertical grid from 10 pixels to 20 pixels in a 40x40 layout table) 

Resizing a layout table 

You can resize a layout table either by dragging or by using the Layout Table Properties dialog 
box. 

Resizing a layout table using the mouse 

1 . Select a layout table. The resize handles will appear. 

2. Resize the layout table by dragging one of the 8 resize handles. Layout table size (width x height) 
is displayed in a yellow pop-up description. 

3. If you have activated the Snap option, the size of the layout table increases or decreases while 
fitting grids. 
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Using Layout Table Properties dialog box 

1 . Double-click a layout table or click the layout table and select the [Table > Layout Table > Layout 
Table Properties...] menu command. 

2. Enter Height and Width in pixels in the Layout Table Properties dialog box. 

3. Click OK. 



Grid Spacing: 10 pixels 

Q You can resize a layout table while maintaining its width-height ratio by dragging one 
of the resize handles while pressing the <Shift> key. 

Q When the Snap option is on, you can increase or decrease the size of a layout table 
by the spacing of the horizontal/vertical grid you have specified in the Layout Table 
Properties dialog box. When the Snap option is off, you can resize a layout table to 
whatever size you want. 
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Working with Layout Cells 



Inserting a layout cell 

You can insert layout cells in a layout table. 

1 . Create a layout table. 

2. Select the [Table > Layout Table > Draw Layout Cell] menu command or click Draw Layout Cell 

on the Layout Table Toolbar. 



3. When the mouse-pointer turns into -|- , left click and drag the mouse to the size you want. If the 
Snap option is activated, borders of the layout cell are attracted to grids. 



lLayout Cell ! 



(Example of inserting the text "Layout cell" after creating a layout cell in the layout table.) 

H If you don't want the grids to attract layout cells, deselect Snap in the Layout Table 
Properties dialog box. 

H The mouse-pointer turns into (s) outside the layout table or where a layout cell 
cannot be inserted. 

H To escape from the Draw Layout Cell mode, press the <Esc> key or right-click the 
mouse button. 



Selecting a layout cell 

You can select multiple layout cells in a layout table. 

4. Place the mouse-pointer on the border of a layout cell. Select the layout cell when the 
mouse-pointer turns into *ii . 

5. A layout cell is selected and the mouse-pointer turns into a hand (^) when you hold down the left 
mouse button. The resize handles appear on the border of a layout cell. 

6. Select other layout cells while pressing the <Shift> key. 
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Moving a layout cell 

You can move a layout cell either by dragging or using the Layout Cell Properties dialog box. 



Moving the layout cell by dragging 

1 . Place the mouse-pointer near the borders of a layout cell. Click the layout cell when the 
mouse-pointer turns into ^ . 

2. The mouse-pointer turns into a hand (<f)>) and 8 resize handles appear on the layout cell borders. 

3. Click the layout cell and drag it to where you want. The position of the layout cell is displayed in a 
yellow pop-up description. 

4. You can select and move multiple layout cells at once. 
Moving multiple layout cells 

1. Select the multiple layout cells by clicking the layout cells while holding down the <Shift> key. 

2. Release the <Shift> key you have been pressing. 

3. Click in and drag the last selected layout cell with the mouse. The other layout cells are also 
moved to the same direction and in the same distance. 



Using the Layer Cell Properties dialog box 

1 . Double-click a layout cell or select the {Layout Cell Properties...} from the shortcut menu. 

2. Enter the relevant values in Left and Top under Position and size in the Layout Cell Properties 

dialog box. 

3. Click OK. 



1 pJ 




H Selecting a layout cell and pressing arrow keys moves the layout cell by 1 pixel. 

H Selecting a layout cell and pressing arrow keys while holding down the <Shift> key 
moves the layout cell by 10 pixels. 

Q The mouse-pointer will turn into 0, when it is impossible to move a layout cell (when 
you try to move a layout cell out of the layout table or over another layout cell). 
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Resizing a layout cell 

You can resize a layout cell either by dragging or by using the Layout Cell Properties dialog 
box. 

Resizing a layout cell using the mouse 

1. Select a layout cell. The resize handles will appear. 

2. Resize the layout cell by dragging one of the 8 resize handles. Layout cell size (width x height) is 
displayed in a yellow pop-up description. 

Using the Layout Cell Properties dialog box 

1 . Double-click a layout cell or click the layout cell and select the [Table > Layout Table > Layout 
Cell Properties...] menu command. 

2. Enter Height and Width under Position and size in the Layout Cell Properties dialog box. 

3. Click OK. 

Resizing multiple layout cells 

1 . Select the multiple layout cells by clicking the layout cells while holding down the <Shift> key. 
When selected, the resize handles of each layout cell will appear. 

2. Resize the last selected layout cell by dragging one of its 8 resize handles using the mouse or 
arrow keys and <Shift> and/or <Ctrl> key. The other selected layout cells are resized as well. For 
example, if you make the last selected layout cell 10 pixels wider and 20 pixels longer, the other 
layout cells are enlarged as much. You can also use arrow keys and <Shift> and/or <Ctrl> key. For 
this method, refer to the following references. 



Q You can resize a layout cell while maintaining its width-height ratio by dragging one of 
the resize handles at the corner and pressing the <Shift> key and releasing the mouse 
button. 

H You can increase or decrease the size of a layout cell by 1 pixel by pressing one of 
the arrow keys while holding down the <Ctrl> key. You can also increase or decrease size 
of a layout cell by 10 pixels by pressing one of the arrow keys while holding down 
<Shift+Ctrl>. 

H The mouse-pointer will turn into 0, When it is impossible to resize a layout cell 
(when you try to resize a layout cell beyond the layout table or over another layout cell). 
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Adjusting the layout cell size to the minimum area containing the inserted 
objects 

1 . Insert a layout cell inside a layout table 

Place the cursor in the layout cell and insert contents. 

Select the layout cell by clicking the border of the cell. The cell borderline is highlighted and 8 
resize handles appear. 

Select one of the following methods. 

• Select the [Format > Layout > Fit to Contents] menu command or click Fit to Contents 

[M] on the Layout Toolbar. 

• Select the [Table > Layout Table > Layout Cell Properties...] menu command or {Layout 
Cell Properties...} in the shortcut menu. In the Layout Cell Properties dialog box, press 

under Position and size and click OK. 



Fit to contents 



5. The layout cell size is automatically adjusted to fit to the contents inside the layout cell. 




(Example: When Fit to Contents is applied to a layout cell after inserting 'bicycle_blue.gif from the 
Clip Arts tab of Resource Manager.) 



Decorating the background of a layout cell 

You can decorate a layout cell by inserting a background image or applying a background 
color. 

1 . Double-click a layout cell or click the layout cell and select the [Table > Layout Table > Layout 
Cell Properties...] menu command. 

2. In the Layout Cell Properties dialog box, specify Image and Color under Background. 

3. Click OK. 

Q If the background image is bigger than the layout cell, the image will be cropped to fit 
in. If the background image is smaller than a layout cell, the image is displayed 
repeatedly as a checkerboard. 
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Applying borders to a layout cell 

You can specify the border thickness of a layout cell. You can make a layout cell look framed 
by applying a border. 

1 . Double-click a layout cell or click the layout cell and select the [Table > Layout Table > Layout 
Cell Properties...] menu command. 

2. Specify the border thickness by increasing or decreasing the values in Left, Right, Top, Bottom 
under Borders in the Layout Cell Properties dialog box. 

3. Select a border color in Color under Borders. 

4. Click OK. 




Q If you adjust the value of Left, the values of Right, Top, Bottom change along with it. 
Change the values of Right, Top, and Bottom if you want to apply different thickness 
than that of the left border. 

Specifying layout cell margins 

You can specify margins for layout cells. 

1. Double-click a layout cell, or click a layout cell and select the [Table > Layout Table > Layout Cell 
Properties...] menu command. 

2. Specify the layout cell margins by increasing or decreasing the values of Left, Right, Top, Bottom 
under Margins in the Layout Cell Properties dialog box. 

3. Click OK. 




Margin 5 Margin 0 



(Example of a layout cell with a background color, and its Left, Right, Top, Bottom margins all set to 
'5') 

Q If you apply too large margin to a layout cell, the layout cell may not be displayed 
properly. 

Q If you adjust the value of Left, the values of Right, Top, Bottom change along with it. 
Change the values of Right, Top, and Bottom if you want to apply different thickness 
than that of the left margin. 
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Aligning objects in a layout cell 

You can specify the alignment of objects inserted in a layout cell. 

1. Select a layout cell and double-click it. You can also select the [Table > Layout Table > Layout 
Cell Properties...] menu command or {Layout Cell Properties...} in the shortcut menu. 

2. Specify the Horizontal and Vertical alignment under Alignment in the Layout Cell Properties 

dialog box. 

3. Click OK. 
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Example of Vertical Alignment 



Copying a layout cell 

If you copy a layout cell, all the objects in the layout cell and the layout cell attributes are 
copied as well. 

1 . Place the mouse-pointer near the borders of a layout cell. Click the layout cell when the 
mouse-pointer turns into ^ . 

2. The layout cell is selected and the resize handles appear on the cell borders. 

3. Move the selected layout cell by dragging the mouse-pointer (fe^) while pressing the <Ctrl> key. 
The position of the copied layout cell will be displayed in a pop-up description. The position is the 
X/Y coordinates of the left top edge. 

4. Release the mouse button and the layout cell is copied. 




(Example of copying a layout cell by clicking and dragging.) 

H You can select multiple layout cells and copy them at once. 
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Aligning multiple layout cells 

You can align multiple layout cells or make them have the same width or size. When selecting 
multiple layout cells, the last chosen layout cell will be the basis of alignment. 

1 . Select a series of layout cells that you want to align while pressing the <Shift> key Select the 
layout cell to which that you want to align other layout cells last. 

2. Select the [Format > Layout] menu command or use the tool buttons on the Layout Toolbar. 

Q Align buttons on the Layout Toolbar are activated only when two layout cells in the 
same (horizontal/vertical) direction are selected. The last chosen layout cell will be the 
basis of alignment. 

Adjusting layout cell size 

When you select multiple layout cells, the last chosen layout cell will be the basis of the 
resizing. 

1 . Select a series of layout cells that you want to resize while pressing the <Shift> key. Select the 
layout cell that will be the basis of the resizing last. 

2. Select the [Format > Layout] menu command or use the tool buttons on the Layout Toolbar. 

Q Resize buttons on the Layout Toolbar are activated only when more than two layout 
cells in the same (horizontal/vertical) direction are selected. The last chosen layout cell 
will be the basis of resizing. 

Adjusting space between layout cells 

1 . Select a series of layout cells while pressing the <Shift> key. 

2. Select the [Format > Layout] menu command or use tool buttons on the Layout Toolbar. 

89 Space-control buttons on the Layout Toolbar are activated only when three or more 
layout cells in the same (horizontal/vertical) direction are selected. The last chosen layout 
cell will be the basis of resizing. 
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Deleting a layout cell 

You can delete more than one layout cells at once. If you want to cancel deleting, press the 
shortcut key <Ctrl+Z> or click Undo 0 on the Standard Toolbar. 

1 . Place the mouse-pointer on the border of a layout cell. When the mouse pointer turns into *m , 
select the layout cell. When the layout cell is selected, its resize handles appear at the border of 
the cell. To select multiple layout cells, select them while pressing the <Shift> key. 

2. Press the <Del> key. 
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Chapter 13 

Frames 

Frame Overview 
Creating Frames 
Removing Frames 
Modifying Frames 
Saving Frames 
Printing a Frameset 



Frames are useful when you have content that is repeated on many pages of a site. 

Namo WebEditor makes working with frames as easy as possible. 



Frame Overview 



What are Frames? 
Frame 

A frame refers to a 'skeleton', or 'structure' in its ordinary meaning. In other words, 'frame' 
implies the demarcation of a certain area. When used in relation to a Web page however, 
'frame' refers to the individual window constituting each part of the vertically or/and 
horizontally divided Web page. In a broader sense, 'frame' refers to Web authoring 
methods, in which the screen of a Web browser is divided into several windows. One 
frame contains one HTML document within itself, and constitutes a whole Web page in 
connection with adjacent frames. Accordingly, one frame is one independent HTML 
document. 

Why use frames? 

Using frames spares you the chore of creating and applying a specific Web page 
repeatedly to your Web site. Therefore, frames are frequently used in Web sites that have 
large amounts of content and complex structure. 

Frames and Frameset 

Frames are a way to display two or more documents in the same Web browser window 
simultaneously. Frames divide a browser window into two or more partitions, each of 
which displays a different document. Each frame can be scrolled independently of other 
frames (if scrolling is enabled for the frame). A browser window can contain any number 
of frames at the same time, and each frame can display different documents at different 
times (but only one document at a time in each). 

For instance, if a browser window contains two frames, one frame might display a 
document that consists of only a list of hyperlinks, while the other frame might display 
the referent of one of the links in the first frame. Each time you click a link in the first 
frame, the referenced document is loaded in the second frame. 

A set of frames is called a frameset, and the document that contains information about the 
frames in a frameset is called the frameset document. The frameset document is an HTML 
document that contains nothing but a list of the frames in the frameset, some information 
about each frame— such as its name, size, and default document— and a message that is 
shown in browsers that do not support frames. The frameset document does not contain 
any of the content of the frames that it defines; that content is supplied by the frame 
documents. The frameset document itself is "invisible": when you open a frameset 
document in a browser, you don't see the frameset document— you see the documents in 
each frame. 
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Accordingly, a frameset document is required, in addition to the HTML documents 
corresponding to each of the frames. 

13 To split up your Web document using frames, use the Resource Manager - Frameset 
folder or Split Frame Horizontally/Vertically by selecting the [File > New...] or [Frame > 
Split Frame] menu command. 



Frame Properties 
Frame name 

A frame name is the unique value of each document used to distinguish individual frames. 
On the other hand, the file name of a document is the name of the HTML document 
which will be opened within each frame. 

Target frame 

Target frame refers to the frame where the hyperlinked document is displayed when you 
click the hyperlink in the current frame. You can specify the target frame on your own, or 
simply use the default names offered by Namo WebEditor. The default target frame 
names are _blank, _parent, _self, and _top. 

_blank 

Shows the hyperlinked document or image in a new browser window. 
_parent 

Shows the hyperlinked document or image in the whole frameset, including the current frame. 
_self 

Shows the hyperlinked document or image in the current frame. 
_top 

Shows the hyperlinked document or image in the whole browser window, replacing the current 
frameset. 

Frame size and spacing 

Frame size is specified by its width and height using 'pixels', '%', or ""(relative)'. Frame 
spacing is specified by its left and top margins using 'pixels'. 

Pixels 

Fixes the size of a frame in pixels. Select pixels from the unit drop-down menu and enter the 
number of desired pixels. If you enter 1 00 pixels, the frame width or height is set to exactly 1 00 
pixels. If the sizes of all the frames in a frameset are specified in pixels, and the sum of the sizes 
is different from the actual width or height of the browser window, then at least one frame will 
appear differently than specified. Therefore, it is suggested that you specify the size of at least 
one frame in relative terms. 
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% 

This regards the size of the current browser window as 1 00 and sets the size of each frame by a 
percentage of the total. If the sum of the sizes of all frames exceeds 1 00%, the size of each frame 
will be reduced by its proportion. If the sum of the sizes is less than 100%, the size of each frame 
will be increased by the same proportion. However, if one frame has its size specified in relative 
terms, the size of that frame will be increased to compensate for the size difference. 

*(relative) 

Specifies the extra space not occupied by other frames or the relative size. For example, if a 
frameset is split vertically into three frames and the leftmost frame is assigned a relative width of 2, 
the middle frame a relative width of 4, and the rightmost frame a relative width of 3, then the ratio 
of the widths of the three frames will be 2:4:3. 

B3 'Pixel' is a fixed measure like 'cm', or 'mm'. On the other hand, '%' is a measure by 
which we describe what portion of the entire browser window a frame takes up. 
Accordingly, it is not a fixed measure and is shown differently according to the size of the 
browser window. 

Showing and hiding the scroll bar 

A Scroll bar appears when the document is larger than your browser window. However, 
you can either make the scroll bar visible or invisible irrespective of the document size, 
or make it appear automatically according to the window size. 

Enable frame resizing in browser 

By checking this check box, you can enable site visitors to resize the frame in their Web 
browser by clicking and dragging the frame border. 

Frame border thickness 

You can make the frame borders invisible or appear outstanding by specifying the frame 
border thickness, in pixels. 

If you set the border thickness to 0, the borders will be hidden when the document is 
viewed in a browser. (The borders will still be visible in Namo WebEditor's Edit window.) 

Due to a current bug in Internet Explorer, if the border thickness is set to 4 or 
less, the borders will be invisible when the document is viewed in Internet 
Explorer. 



204 | Chapter 13 



Creating Frames 



Creating a new frameset document 

Creating a new frameset 

1 . Select the [Frame > New Frameset...] or [File > New...] menu command. 

2. In the Resource Manager, click Frameset in the left folder list. 

3. Select a frameset among the right frameset types and click OK. When you select a frameset, 
information about it is displayed in Description and Filename at the bottom. 

4. The selected frameset appears in the Edit window. 



You can add a frame to the current document or frameset document. If you create a frameset 
document by selecting the [Frame > New Frameset...] menu command, frame names are 
automatically specified. However, If you create a frameset document by selecting the [Frame 
> Split Frame] menu command, frames will not have their name. In this case, you should set 
the name of each frame in Frame Properties dialog box. Note that this task cannot be undone 
by selecting the [Edit > Undo] menu command. 

Splitting a frame vertically or horizontally 

1. Select the [Frame > Split Frame > Left/Right/Top/Bottom] menu command. 

2. If you split the frame by selecting the [Frame > Split Frame > Bottom] menu command, the 
current one is displayed in the upper frame and the new frame in the lower frame. If you select 
other directions, the frame will split accordingly. 



H You can easily create a well-balanced frameset document by selecting the desired 
frameset type from among the ready-made frameset lists in the Frameset tab of the 
Resource Manager. 



Splitting a frame 



B3 To remove the frame, click the frame border and drag it toward and outside of the 
Edit window. Click Yes when prompted whether you want to really remove the frame. 




the frame into, as you do with the Create Table H button. 
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Removing frames 

Removing frames changes only the structure of the frameset document (in case you have 
saved all the frames!). You should save the modified frameset document after removing any 
frame(s). 

Removing frames with your mouse-pointer in the Edit window 

1 . To remove the frame, place your mouse-pointer over the frame border. Your mouse-pointer now 
appears as an arrow. 

2. Click and drag the border line outside the Edit window. Ensure that while you drag the unwanted 
border toward the edge of the frameset, the size of the unwanted frame is reducing. 



A t 



B 









3. Click Yes when a dialog box appears asking you to remove the frame. 
Removing the frame in the Delete Frame dialog box 

1 . Place the cursor inside the frame that you want to delete and select the [Frame > Delete Frame...] 
menu command. 

2. In the Delete Frame dialog box, specify the number of frames to be deleted in Number of rows or 
columns and click OK. 

3. Click Yes when a dialog box appears asking you to remove the frame. 

H You can delete multiple frames in the same direction (e.g.. vertical / horizontal) in the 
Delete Frame dialog box. 

Q Removing a frame deletes its content as well. 

13 It is the reduced frame that is removed when you drag the frame border. If more than 
three frames are aligned in the same direction (e.g., vertically, as shown below), and you 
want to delete all frames except one, click and drag the leftmost border all the way across 
its opposing border to the outside of the Edit window. For instance, if you drag the 
leftmost border to the right, frames B and C are deleted and only the leftmost frame 
(frame A) remains. 



AH 


BIT 








— > 
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Modifying Frames 



Fixing frames 

You can fix the size of a frame irrespective of the browser window size. You can specify the 
width and height of a frame by 'pixel', '%', or ""(relative)'. To fix the frame size, specify the 
size by pixel. 

1 . To fix the size of the frames, irrespective of the browser window size, place the cursor inside the 
relevant frame. 

2. Select the [Frame > Frame Properties...] menu command. 

3. In the Frame Properties dialog box, set the width and height of the frame in pixels, using the 
Frame height and Frame width drop-down menu under Size and spacing. Click OK. 

Q You can specify the Frame height and Frame width by 'pixel', '%', and '*(relative)\ 

Specifying the target frame 

Target frame refers to a specific frame, in which a hyperlinked Web page will be displayed 
when a site visitor clicks on any link in a frame. If you create a frameset document by 
selecting the [Frame > New Frameset...] menu command, frame names are automatically 
specified. However, If you create a frameset document by selecting the [Frame > Split Frame > 
Left/Right/Top/Bottom] menu command, frames will not have their name. In this case, you 
should set the name of each frame in the Frame Properties dialog box. You can enter a target 
frame in person or use 4 kinds of Default Target Frame ( blank, jparent, _self, _top). 

1 . Place the cursor inside the frame whose target frame that you want to specify and select the 
[Frame > Frame Properties...] menu command. 

2. In the Frame Properties dialog box, select the target frame from the Browse target frame 
drop-down menu or click the Default Target Frame... [Wj button and select the target frame by 
clicking on the target frame area and click OK in the Target Frame dialog box. 

3. Click OK. 

Q Target frame refers to the frame where the hyperlinked documents are displayed 
when you click the hyperlinks in the current frame. 

Q In the Target Frame dialog box, clicking on the target frame area, whose frame name 
has not been specified, will show the message "The selected target frame has no name. 
Please specify the frame name first." In this case, set the name of each frame in the 
Frame Properties dialog box first and specify the default target frame later. 

Replacing documents in a frame 

You can open a new or existing document in a frame. In this case, a document constituting a 
frame, not all the frame documents of a frameset, is replaced. 
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Opening new documents in a frame 

1 . To close the current document and open a new one in the current frame, place the cursor within 
the appropriate frame and select the [Frame > New Document in Frame] menu command. 

2. If you haven't yet saved the current frame, a dialog box will appear asking whether to save the 
changes you have made. 

3. If you click No, the new document is opened in the current frame. 

Q Click Yes when that you want to save the current document and open a new 
document. If you don't want to save the current document, click No. If you want to come 
back to the current frame without opening a new document, click Cancel. 

Opening documents in a frame 

1. Select the [Frame > Open Document in Frame...] menu command when that you want to open a 
document from your local drive into the current frame. 

2. Click the file that you want to open in the Open dialog box and click Open. The selected file is 
opened in the current frame. 

Modifying frameset document properties 

Since the frameset document is just an ordinary HTML document, it has document properties 
just like any other Web documents. To view or modify a frameset document's properties, use 
the [Format > Document Properties...] menu command. 

However, since a frameset document is invisible to the site visitor, most of its document 
properties are irrelevant, even though you can set all of them. (All the properties are relevant 
if the browser used to view the frameset does not support frames, in which case it will display 
the content of the frameset document - usually the no-frames message.) 

Frameset properties 

1 . To modify the properties of the current frameset, select the [Frame > Frameset Properties...] 
menu command or {Frameset Properties} in the shortcut menu. 

2. In the Document Properties dialog box, specify the properties in the General tab, and click OK. 

• The Location field provides the URL of the document or the path of the folder in which the 
current frameset document is saved. You can modify this information using the [File > 
Save As...] menu. 

• The Title text box contains the title of the document. The entered title is displayed in the 
title bar at the top of the Preview window or Web browser window. 

• You can enter the author of the document in Author. 

• Enter the summary of the document in the Description field. If you register your Web site 
with Internet Search services, this description is displayed with the URL of your Web site. 

• Keywords are used as search words by Internet search engines, just as with any other 
Web document. 
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• Enter the frame in which hyperlinked documents or images are displayed in the Default 
target frame field. 

• The selected effect in Advanced page effects will operate on the frameset as a whole. 

• The selected sound in Background sound will play when the frameset is opened. 

• The document specified in URL jump to: will be opened, replacing the frameset in the 
browser window. 

Q If you want to modify only the properties of the frame where the cursor is currently 
located, not those the frameset, select [Format > Frame Properties...] from the menu. 
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Saving frames 

You must save a frameset document as well as frame documents when you save a document 
made of frames. If you want to save all the documents connected to a frameset document, 
choose Save All Frames. If you want to save just frameset document, select Save Frameset. If 
you want to save a frameset as another frameset file, select Save Frameset As.... After you have 
modified a document made of frames, you should save the modified document(s) or save all 
the documents connected to the frame by selecting Save All Frames. 

Saving all the documents connected to a frameset document 

1 . To save the current frameset document and its frame documents, select the [Frame > Save All 
Frames] menu command. 

2. If you have not previously saved any of the documents, the Save As dialog box is opened for each 
frame in order. 

3. Enter File name and click Save. 

Q If the document opened in any of the frames is not the frame's default document, you 
may want to avoid using the [Frame > Save All Frames] menu command, since any 
unintentional changes to the displayed document will be saved without prompting. 

Saving a frameset document 

1. Select the [Frame > Save Frameset] menu command. 

2. If you have not saved any of the documents, the Save As dialog box opens. If you have already 
saved the frameset document, the modified contents are automatically saved in the current 
frameset document. 

3. Enter File name and click Save. 

Q The frameset document contains only the information on the name, size, and 
properties of individual frames. Therefore, whenever the contents of the frame are 
modified, the frame should be saved. 

H Since a frameset is composed of the frameset document and two or more frame 
documents, when saving a frameset you will need to save all its individual component 
documents. 

Save frameset as another frameset 

1 . To save the current frameset as another frameset, select the [Frame > Save Frameset As...] 
menu command. 

2. Enter File name and click Save in the Save As dialog box. 

H Save Frameset As allows you to save the current frameset as a second frameset with 
a new name, without changing the current frameset. The name of the frameset in the 
document tab is changed but the individual frameset documents are not. In other words, 
2 frameset documents with different names will share the same individual frames. 
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Printing a Frameset 



You can preview the print layout of a whole frameset document and print it. To see the print 
layout of an individual frame, not the whole frameset document, select the [File > Print 
Preview] menu command. 

Previewing the frameset print layout 

1 . If you want to adjust the frameset layout or overall print layout, select the [Frame > Frameset Print 
Preview] menu command. 

2. If there is anything that you want to modify, click Close and edit the document. Otherwise, click 
Print... to open the Print dialog box where you can specify print options and print the frameset. 

Printing a frameset 

1. Select the [Frame > Print Frameset...] menu command to send and print the frameset to your 
printer or a file. 

2. Set the print option in the Print dialog box and click OK. 

H Frameset printing produces the frameset document exactly as it appears. To print 
each of the frames, place the cursor inside the target frame and select the [File > Print...] 
menu command. 

Q If you place the cursor inside frame A and select the [File > Print...] menu command, 
only frame A is printed. However selecting the [Frame > Print Frameset...] menu 
command will print all the frame documents, regardless of cursor location. 
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Chapter 14 

Multimedia Objects 

Multimedia Overview 
Inserting Multimedia Objects 

Multimedia objects can enrich a Web site greatly. With Namo WebEditor,you can 
insert popular multimedia formats and specify settings directly in the 'Edit window. 



Multimedia Overview 



Web and Multimedia 

Many different multimedia formats are available to enrich the graphic, sound, and 
animation effect to the Web. You can insert popular multimedia files and specify settings 
directly from the Edit window. 

Multimedia formats 
Flash 

Flash animation is a vector type animation format made by Macromedia and created using 
Macromedia applications, such as Director and Fireworks. Compared to most other multimedia 
types, Flash objects have relatively small file sizes, because they are based on vector graphics 
(images described by mathematical expressions, rather than bitmaps); thus, taking less time to 
download. Flash files use the .swf extension. It is necessary to download Flash plug-in in order to 
view a Flash file. 

Shockwave 

Shockwave is a multimedia technology developed by Macromedia. To preview Shockwave objects 
in the Preview window, you must have the Shockwave Player Plug-in for Internet Explorer 
installed in your computer. Your site visitors must also have the plug-ins in order to view your 
Shockwave objects. Shockwave files use the .dcr extension. 

QuickTime 

QuickTime is a multimedia file format owned by Apple Computer. Many of the movies and sound 
files found on the Web are in QuickTime format.QuickTime files use the .mov extension. To 
preview QuickTime objects in the Preview window, you must have the QuickTime Plug-in for 
Internet Explorer installed on your computer. Your site visitors must also have the plug-in in order 
to view your QuickTime objects. 

MIDI 

MIDI, which stands for Musical Instrument Digital Interface, is a music file format. A MIDI file is like 
a score for a song or a symphony; they don't actually contain any sounds, relying instead on your 
computer's sound card to generate the sounds. Thus, MIDI files are very compact and quickly 
downloaded. MIDI files use the .mid or .midi extension. To preview MIDI objects in the Preview 
window, you must have a plug-in capable of playing MIDI files installed for Internet Explorer on 
your computer. Your site visitors must also have the plug-in in order to listen to your MIDI objects. 

RealAudio 

RealAudio is a highly-compressed, streaming sound file format owned by RealNetworks. 
"Streaming" means that RealAudio sounds (which can be minutes or hours long) don't have to be 
completely downloaded before they start playing. Rather, the sound data is "streamed" to your 
computer while the sound is playing. RealAudio is often used to play music and spoken word 
recordings. RealAudio files use the .ra, .rm or .ram extension. To preview RealAudio objects in the 
Preview window, you must have the RealPlayer plug-in for Internet Explorer installed on your 
computer. Your site visitors must also have the plug-in in order to listen to your RealAudio objects. 
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ActiveX control 

ActiveX controls are similar to Java Applets, in that they are small programs that you can insert 
into a Web page to do things similar to what an ordinary application can do. Many ActiveX controls 
are built into Windows, and these (and other ActiveX controls that may already be installed in your 
system) are available in the Class ID drop-down menu when you open the ActiveX Control 
Properties dialog box.Flash, Shockwave, and RealAudio objects are actually handled by Namo 
WebEditor as ActiveX controls. ActiveX controls are not supported by Netscape, and may not be 
supported by other browsers besides Internet Explorer. 

Java Applets 

A Java applet is a small program that can be inserted into a Web page. Unlike an ordinary 
application, a Java applet is not executed by double-clicking an icon or selecting an item in 
Windows' Start menu. Rather, it is executed automatically when you view the Web page 
containing it or when you click a button on the page. Also, most Java applets don't run in their own 
window; they run in the browser window. Java applets are available that can be used to do almost 
anything that you can do with an ordinary application, such as edit a spreadsheet, draw pictures, 
or play a game.Java applets use the .cla or .class file extensions. To find useful and entertaining 
Java applets, try searching for "Java applets" using your favorite Internet search engine. 

£3 Whenever you insert a multimedia object into a document, it is represented in the 
Edit window by a placeholder: a white box with a dashed border and the path of the 
object displayed in the center. To preview the multimedia object in action, switch to the 
Preview window. 



Web Browser and Plug-ins 
What is a plug-in? 

A plug-in is a piece of program code that provides some functionality that isn't already built 
into a Web browser. Generally, the plug-in handles a file format that the browser doesn't itself 
handle, such as certain types of multimedia files. A plug-in object is a file that is handled by a 
plug-in. QuickTime movies and RealAudio files are two types of plug-in objects, but there are 
many more. 

Refer to the following URLs for more information on multimedia files and plug-ins. 

• Flash - Macromedia Home Page http://www.macromedia.com 

• Shockwave - Macromedia Home Page http://www.macromedia.com 

• QuickTime - Apple Homepage http://www.apple.com 

• RealAudio - RealAudio Homepage http://www.real.com 
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Inserting Multimedia Objects 



Inserting a Flash animation 

Flash animation is a vector type Web animation format made by Macromedia. Using Flash, 
you can make a dynamic image with sound, and sometimes a hyperlink, in a very small size 
of file. You should insert Flash movie file(*.swf), not Flash file(*.fla), in the Web document. 
To run Flash movies, you should install the plug-in that processes the file. 

1 . Select the [Insert > Object > Flash...] menu command. 

2. In the Open dialog box, select the Flash file (*.swf) from your local drive or on the Web and click 
Open or Open URL. 

3. ActiveX Control Properties dialog box is opened and the Class ID and Codebase are inserted 
automatically. 

4. Specify the Border, Size and spacing, and Alignment. 

5. If you need to specify some parameters, click Parameters... and specify relevant properties in the 
ActiveX Control Properties dialog box. 

6. Click OK. 

Q Flash files cannot be executed in the Edit window. Check by executing in the Preview 
window or in Web browsers. 

Inserting a Shockwave file 

Shockwave is a multimedia technology developed by Macromedia. You need a Shockwave 
plug-in to play Shockwave files (*.dcr). 

1. Select the [Insert > Object > Shockwave...] menu command. 

2. Select a Shockwave file in the Open dialog box, then click Open. 

3. ActiveX Control Properties dialog box is opened and Class ID and Codebase are entered 
automatically. 

4. Specify the Size and spacing, and Alignment. 

5. Click Parameters... to specify Shockwave-specific parameters in ActiveX Control Parameters 
dialog box. When you're finished editing the parameters, click OK. 

6. Click OK again to return to the Edit window. 

H When you insert a Shockwave animation into a document, the object is represented 
in the Edit window by a box with the words "Shockwave ActiveX Control" inside. To 
preview the Shockwave animation, switch to the Preview tab. 
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Inserting a Quicktime movie 

Quicktime is a multimedia storage, and playback technology made by Apple. It is also the 
standard multimedia protocol for Machintosh computers. Playing a Quicktime movie (*.mov) 
requires Quicktime player which can be downloaded from the Web. When inserting a 
Quicktime file into your Web page, including a link to the download page or letting the 
visitors download in your site is a must. 

1. Select the [Insert > Object > QuickTime...] menu command. 

2. Locate and select a QuickTime movie file in the Open dialog box and click Open. 

3. In the Plug-in Properties dialog box, Plug-in path is entered automatically. 

4. Specify the Border, Size and spacing, and Alignment. 

5. To modify QuickTime properties, click QuickTime Properties... button and specify the relevant 
properties in the QuickTime Properties dialog box. 

6. Click OK. 

Q When you insert a QuickTime movie into a document, it is represented in the Edit 
window by a placeholder (a box with a dotted outline and the path or URL to the movie 
file in the middle), to preview the actual QuickTime movie, switch to the Preview tab. 

Inserting a MIDI file 

MIDI (Musical Instrument Digital Interface) is a protocol for electric musical instruments and 
computers to communicate. MIDI files are small-sized and can be played without additional 
application in your computer, so that they are widely used for background music of Web 
pages. 

1. Select the [Insert > Object > MIDI...] menu command. 

2. In the Open dialog box, select the MIDI file to be inserted and click Open. 

3. In the Plug-in Properties dialog box, Plug-in path is entered automatically. 

4. If you want to make your plug-in invisible in the Web browser, select Hide plug-in. 

5. Specify Border, Size and spacing, and Alignment. 

6. Click OK. 
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Inserting Windows Media Player 

You can play various types of multimedia in the Web document using Microsoft Window 
Media Player. Microsoft Media Player can be used as CD player, Information database, radio 
player, and multimedia files storage. Get the updated information of Microsoft Windows 
Media Player at Microsoft Web site. 

1. Select the [Insert > Object > Windows Media Player...] menu command. 

2. Select a file in the Open dialog box and click Open. 

3. ActiveX Control Properties dialog box will open, and Class ID and Codebase will be inserted 
automatically. 

4. Specify Size and spacing, and Alignment. 

5. Click Parameters... and specify the properties in the ActiveX Control Parameters dialog box, if 
necessary. 

6. Click OK. 

Q You cannot run the Windows Media Player in the Edit window. Switch to the Preview 
tab or Web browsers to play 

Inserting a RealAudio file 

RealAudio is a streaming sound technology developed by Progressive Network. RealAudio 
Player, one of the most widely used plug-ins, plays RealAudio files (*.ra, or *.ram) while or 
after downloading the files from the web site. You can download a RealAudio Player at 
http :// www. realaudio . com. 

1. Select the [Insert > Object > RealAudio...] menu command. 

2. Locate and select a RealAudio file in the Open dialog box and click Open. 

3. ActiveX Control Properties dialog box is opened and Class ID and Codebase are entered 
automatically. 

4. Specify Size and spacing, and Alignment. 

5. If you need to specify some parameters, click Parameters... and specify relevant properties in the 
ActiveX Control Properties dialog box. 

6. Click OK. 

H When you insert a RealAudio file into a document, it is represented in the Edit 
window by a placeholder, to preview the RealAudio file in action, switch to the Preview 
tab. 
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Inserting an ActiveX control 

ActiveX control is a type of components that use COM technologies developed by Microsoft, 
to provide interoperability with other types of COM components. ActiveX controls are 
distributed through Internet, and are "activated" by the Web browser performing a variety of 
functions. It may take a while to open the dialog box if there are lots of ActiveX controls 
installed in your system. 

1 . Select the [Insert > Object > ActiveX Control...] menu command. 

2. In the ActiveX Control Properties dialog box, select the control from the Class ID drop-down 
menu. If you click the drop-down menu, the ActiveX Control list in your hard drive is displayed. 

3. Specify Size and spacing, and Alignment. 

4. If you need to specify the parameters, click Parameters... and specify relevant properties in the 
ActiveX Control Properties dialog box. 

5. Click OK. 

Q You can execute ActiveX controls in the Preview window or in Web browsers that 
support ActiveX, but not in the Edit window. 

Inserting a Plug-in 

A Plug-in is a piece of program code that provides some functionality that isn't built into a 
Web browser. Generally, the plug-in handles a file format that the browser doesn't handle 
itself, such as certain types of multimedia files. A plug-in object is a file that is handled by a 
plug-in. There are variety of plug-ins that enriches the capability of web browsers. 

1. Select the [Insert > Object > Plug-In...] menu command. 

2. In the Plug-in Properties dialog box, enter the Plug-in path by clicking Browse... and specifying 
the plug-in file you want to insert. 

3. Enter in Alt text the description for the Web browsers which do not support the plug-in. 

4. Enter the URL in which you can download the plug-in in Plug-in address. 

5. If you want to make your plug-in invisible to the visitors, check Hide plug-in. 

6. Specify Border, Size and spacing, and Alignment. 

7. Click OK. 

Q The location where you have inserted a plug-in is displayed as a dotted rectangle in 
the Edit window. Double-click the rectangle and you can edit the plug-in properties such 
as Size and spacing, and Alignment. You can modify the size of the plug-in by dragging 
any of the resize handles on the rectangle to the position you want. If you have selected 
Hide plug-in, the plug-in mark ([§]) is displayed at the location you have inserted the 
plug-in. 
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Inserting a Java Applet 

A Java applet is a small program that can be inserted into a Web page. Unlike an ordinary 
application, a Java applet is not executed by double-clicking an icon or selecting an item in 
Windows' Start menu; rather, it is executed automatically when you view the Web page 
containing it or when you click a button on the page. Also, most Java applets don't run in their 
own window; they run in the browser window. Java applets are available that can be used to 
do almost anything that you can do with an ordinary application, such as edit a spreadsheet, 
draw pictures, or play a game. Java Applet file has '*. class' or '*.cls' extension and should be 
placed in the same folder as the html file that contains the Java Applet. 

1 . Select the [Insert > Object > Java Applet...] menu command. 

2. In the Applet Properties dialog box, click Browse... and specify the applet file (*.class or *.cla) to 
be inserted. When the file is specified, the Code and Codebase are entered automatically. 

3. Specify Name if needed. 

4. Enter in Alt text the description for the Web browsers that do not support the Java Applet plug-in. 

5. Specify Border, Size and spacing, and Alignment. 

6. Click Parameters... to open the Applet Parameters dialog box. 

7. Click Add... to add a parameter. Enter the Name and Value of the parameter, and click OK. 

8. Click OK in the Applet Parameters dialog box. 

9. Click OK in the Applet Properties dialog box. 

Specifying parameters 

1. Click Parameters.... 

2. In the Applet Parameters dialog box, Click Add.... 

3. In the Parameter Name and Value dialog box, enter Name and Value and click OK. 

4. In the Applet Properties dialog box, click OK. 

Q Java Applets cannot be executed in the Edit window. Execute in the Preview window 
or in Web browsers that support Java Applet. 

Q The location where you have inserted Java Applet is displayed as a dotted rectangle 
in the Edit window. Double click the rectangle to open Applet Properties dialog box 
where you can edit applet properties. You can modify the size of the plug-in by dragging 
any of the resize handles on the rectangle to the position you want. 

Q Parameters should be entered correctly to function Java Applets. When downloading 
a Java Applet from WWW, also acquire parameters information. 
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Inserting a background sound 

You can insert a Background Sound to your web page. Files that can be used for background 
sound include wave files(*.wav), MIDI files(*.mid), AIFF sound(*.aif, *.aifc, *.aiff) and AU 
Sound(*.au, *.snd). You can also hyperlink a sound to images or texts, allowing the visitors to 
play or download the sound file. 

1. Select the [File > Document Properties...] menu command or press the shortcut key <Ctrl + F2>. 

2. In the Document Properties dialog box, click Styles tab. 

3. Enter a URL or path to a sound file in Background sound, or click Browse... to select a sound file 
from your local drive. 

4. Specify how many times the file should be repeated in Repeat. If you want to keep the music 
playing continuously, check Repeat forever. 

5. To listen to the selected music in advance, click i"T"| . 

6. Click OK. 

Q Only Internet Explorer activates the background sound inserted in the Document 
Properties dialog box. In case you want to listen to the sound with Netscape, you should 
install a relevant plug-in. 

Inserting spreadsheets 

You can insert MS Excel spreadsheets into the web document. Choose the Insertion method to 
decide how to edit data. If you choose to preserve the link with the spreadsheet or to embed 
the spreadsheet in the html, you will edit the data in Excel. If you choose to copy just the data, 
you will edit the data in the Web Editor. 

1 . Select the [Insert > Other > Spreadsheet...] menu command. 

2. In the Spreadsheet dialog box, click Browse... and specify the spreadsheet file to be inserted. 

3. Select the way to link the original data file with the inserted spreadsheet under Insertion method. 

4. Click OK. 



Multimedia Objects | 221 



Chapter 15 

Layers and Time Lines 

Layers and Time Lines 
Creating Layers 
Modifying Layers 
Working with Time Lines 

Layers are used to position page elements independently of other elements. 
Time lines can be used to make layers change position overtime. 




Layers and Time Lines 



What is a layer? 

A layer refers to an area in an HTML document in which various objects (images, text, 
tables, etc) can be inserted. You can insert multiple layers in a document and even place 
one layer over another. You can set layers as visible or invisible, place them precisely 
where desired, and apply various effects to them. Therefore, you can position text or 
images anywhere, which normally have a limitation in occupying their position in a Web 
document, by inserting them within a layer. You can even create dynamic effects with 
them. 

Note, however, that layers are not always properly displayed in some Web browsers and 
can appear differently than expected. Please take the following into consideration when 
working with layers. 

When you insert a layer within another layer 

A layer inserted into another layer is called a child layer. Netscape does not properly display the 
position of a child layer. 

When you apply a style sheet to a table within a layer 

Internet Explorer and Netscape show a difference in interpreting style sheets, which is caused by 
the different style sheet processing of each browser. For example, Netscape does not properly 
display the style sheet applied to a table within a layer. Thus, it is suggested you do not apply style 
sheets to a table inside a layer. 

When you insert a layer in the middle of a paragraph 

If you insert a layer in the middle of a paragraph, note that the position of the layer will change 
according to the size of the browser window. Generally, texts or images take a relative position, 
which makes them automatically change their position according to the change in size of your 
browser window. However, a layer takes an absolute position and it does not change its position 
according to a size change of the browser window. Thus, it is suggested that you create the layer 
at the top of the Web document. 



Layer Properties 

Layer ID 

Every layer in a document has a unique ID, which can be useful in identifying the layer not only in 
the Layer List window, but also for use in actions, Time Lines, and the Script Wizard. 

Position 

The position of the layer is set by the top-left edge. For example, in case a layer is located in the 
topmost and leftmost of your Web browser as in the following picture, the position of the layer is 
top 0 pixel, and left 0 pixel. 

Size 

Sets the height and width of a layer, in pixels. 
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Z-index 

Z-index refers to the order in which a layer is displayed among other overlapped layers, as in the 
following picture. The layer with the highest z-index appears on the top. 




Z-index 2 



Visibility 

You can set a layer as visible or invisible. The visibility of a layer is important because it can be 
used to create dynamic effects by applying actions to layers. 

Background 

You can specify the layer's background color or image. However, note that layer background 
image or color is not properly displayed in Netscape. 



Working with Layers in Namo WebEditor 

Layer and HTML tags 

If you click Insert Layer W\ on the Standard Toolbar, a layer is inserted in the Edit 
window, and the <div></div> tag is inserted in the HTML window. 

<div id="layerl" style—'width : 200px; height : 2 OOpx; position: absolute; 
left:26px; top:14px; z-index: l;"x/div> 

If you want to insert a layer using <LAYER> tags, you should select the Use <LAYER> 
tag option in the Layer Properties dialog box. However, when you use this option, the 
layer will be displayed only in Netscape. 

<layer id="layerl" left="26" top="14" width="200" height="200" 
z-index="l"></ layer> 

Layer components 





^jLayer Handle 


Layer 


tag mark 
Layer area 



Layer tag mark: The layer tag mark indicates the position where the layer is inserted within the 
document. 

Layer handle: The layer handle is used when you select a layer by clicking. This serves also as 
a handle for moving the layer in the Edit window. 
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Layer area: A layer is a movable container for text, images, and other page elements. Anything 
that can be put on a page can also put into a layer (including another layer). 

Layer Inspector 

If you insert a layer in a Web document, the Layer Inspector is activated. You can specify 
layer name, layer position, size, Z-index, background, etc in the Layer Inspector. You can 
also align or resize layers using various layout buttons at the bottom. 

Layer Properties dialog box 

If you double-click a layer in the Edit window, the Layer Properties dialog box appears. 
Here, you can specify all the properties of a layer such as layer ID, position, size, Z-index, 
background, etc. 

Layer list 

View the list of all the layers inserted in the document by selecting the [Window > Layer 
List] menu command and opening the Layer List window. Namo WebEditor automatically 
labels the layers you have inserted as 'layer 1', 'layer2', 'layer3', etc. 

Applying effects to layers 
The Script Wizard 

Namo WebEditor's built-in effects in the Script Wizard can be applied to layers. 
Actions and Events 

It is easy to perform tasks such as making a hidden image visible or getting a description to 
appear by applying actions to layers. 

Time Lines 

A Time Line refers to an effect, which can control the position and properties of a layer on a timely 
basis for the purpose of creating an animation effect. You can create various types of animation 
using layers and a Time Line. 

Time Lines 

A Time Line is a way of specifying changes in the position of one or more layers over 
time, after the document containing the layers has been loaded in a Web browser. The 
actual moving is done by a script, which is generated by Namo WebEditor when you 
create the Time Line. 

A Time Line can start automatically as soon as the document is loaded in a browser, or it 
can be started and stopped by a JavaScript action that is triggered by some event, such as 
a mouse click. In addition, you can have multiple time lines in a single document; each 
Time Line can be triggered by a different event. 
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Layer and Time Line 



You can create a layer animation by specifying layer position and properties in terms of 
time to a layer inserted in the Time Line window. You can also create eye-catching 
animations and let a specific action be performed at a specified time by controlling 
different Time Lines simultaneously. 

Time Line and action 

You can add an action to a specific scene of the Time Line. Applying actions to the Time 
Line lets you create various dynamic effects, such as stopping or restarting movement of 
a layer, by controlling an action, triggered by an event, in terms of time. 
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Time Line Terms 

To open the Time Line window, select the [Window > Time Line] menu command or press 
the shortcut key <Alt + 4>. 

Definitions of terms regarding Time Lines 

Refer to the image below for the names of various parts of Time Lines and the Time Line 
window. 



Current frame number 

Frames per second 




Term 


Definition 


current frame 
indicator 


The red line in the Time Line window that indicates the frame 
currently being viewed. 


frame 


The building blocks of a sprite; describes the position of one layer at 
a particular time. 


key frame 


A frame that describes a user-specified position. Positions between 
key frames are calculated automatically. 


Action row 


Shows whether an action has been applied to the frame. Shows 'A' 
when an action has been inserted. 


Frames per second 


Specifies how many frames should be displayed a second. The bigger 
this number, the faster the layer movement becomes. 


layer 


A movable container for text, images, etc. 


layer handle 


The small box at the top-left comer of a layer; used to move the layer. 


layer outline 


The gray line around a layer (not visible in a browser). 


sprite 


Part of a Time Line; describes the positions of one layer over an 
interval of time. 


Time Line 


Describes the positions of one or more layers over an interval of time. 
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Creating Layers 



A layer is a movable container for text, images, and other document elements. Anything that 
can be put on a page can also be put into a layer (including other layers). Layers can be 
positioned anywhere on a page, because they "float" on top of other page elements. 



Creating a layer 

1. Insert a layer by selecting the [Insert > Layer] menu command or by clicking Insert Layer |0] on 
the Standard Toolbar. 

2. Place the cursor outside of the layer. If another layer is created while the cursor is inside the first 
layer, the second layer becomes a child layer. 

3. Repeat steps 1 and 2 to create additional layers. 

To see the layer tag mark (H) in the Edit window, click Show/Hide Paragraph Marks 
on the Standard Toolbar. To see the layer area in the Edit window, select the [View > 
Marks > Layer Outlines] menu command. Selecting the [Window > Layer List] menu 
command lets you check the information on the layers inserted in the Edit window. 



Creating a child layer 



on 



1. Insert a layer by selecting the [Insert > Layer] menu command or by clicking Insert Layer 
the Standard Toolbar. 

2. Place the cursor inside layer 1 and insert a layer (layer 2) inside the first layer you have created. 

3. The first layer becomes a parent layer and the layer created later becomes its child layer. 

Q The child layer's position is determined in relation to that of the parent layer. Thus if 
you move a parent layer, the child layers move along with it. Note that Netscape does not 
properly show child layers. 
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Modifying Layers 



Inserting contents into layers 

You can insert text or images inside a layer. You can also set background color or image to a 
layer. 

Inserting text and images in a layer 

1 . Place the cursor inside the layer. 

2. Input some text and modify any text properties that you want. 

3. To insert an image in a layer, click Insert Image H on the Standard Toolbar. 

Editing the layer's background 



Using the Layer Inspector 

1 . Double-click or place the mouse cursor in the layer in the Edit window. The Layer Inspector gets 
activated. 

2. Click Color icon in the Bg of the Layer Inspector to specify the background color. You can insert 
an image from the local drive to use as a background by clicking Browse... ISy. 



Using the main menu 

1 . Double-click the layer or select {Layer Properties...} in the shortcut menu. 

2. In the Layer Properties dialog box, set the background color by selecting a color from the Color 
drop-down menu under Background. You can insert an image from hard local drive or use a 
clip-art image as a background by clicking Browse... Clip Art... |^J, or Site... and 
specifying the image file. The Site.... ply button is activated only when a site is open. 




Q The layer background color is not properly displayed in Netscape. 

Q To insert text or images in a layer, the cursor should be placed within the layer as 
shown in the above picture. Inserting contents while the layer is selected (the state in 
which 8 resize handles are displayed) deletes the layer. 



Moving layers 

1 . Click anywhere on the layer. 

2. The layer is now selected and the mouse pointer appears as a hand (<f)?). 
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3. Drag the layer handle to the desired position where you want the layer to be placed. 




Q After clicking on a layer, pressing an arrow key on the keyboard moves the layer 
up/down or right/left by a single pixel. Pressing an arrow key while pressing down the 
<Shift> key lets the layer move up/down or right/left by 10 pixels. 

Q The layer tag mark ( @) indicates the position where the layer is actually inserted 
within the HTML source document. The layer handle ( P_) is displayed only when the 
layer is selected or the mouse cursor is placed within the layer. 

Moving multiple layers 

1. Select the multiple layers by clicking the layers while holding down the <Shift> key. 

2. (When using the mouse) Release the <Shift> key you have been pressing. 

3. Click the last selected layer and the mouse-pointer turns into a hand. Drag the layer with the 
mouse. The other layers are also moved to the same direction and in the same distance. 

Q Selecting multiple layers and pressing arrow keys moves the layers by 1 pixel. 

B3 Selecting multiple layout cells and pressing arrow keys while pressing the <Shift> key 
moves the layout cell by 10 pixels. 

Resizing layers 

You can adjust the size of a layer after inserting an object in it. You can also adjust the size of 
different layers at once. 

1 . Place your mouse pointer over a layer, and left click when the mouse pointer turns into a hand 

2. The layer is selected and 8 resize handles appear. 

3. Place the mouse cursor over one of the resize handles. Resize the layer by dragging any of the 
handles when the mouse cursor turns into an arrow as below. 

■ f 



13 Select the layer and press the arrow key on the keyboard while pressing down the 
<Ctrl> key. The size of the layer increases or decreases by one pixel with each arrow-key 
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press. If you press the arrow key while pressing down <Ctrl+Shift>, the size changes by 
1 0 pixels. 

Q If you drag the resize handle at each corner and press <Shift>, the size of the layer is 
changed maintaining the original width/height ratio. 

Resizing multiple layers 

1. Select the multiple layers by clicking the layers while holding down the <Shift> key. 

2. Resize the last selected layer cell by dragging one of the 8 resize handles using the mouse or 
arrow keys while holding down <Ctrl> and/or <Shift> key. The other selected layers are also 
resized. For example, if you make the layer 10 pixels wider and 20 pixels longer, the other layout 
cells are enlarged as much. 

Copying and pasting layers 

You can create multiple layers without using menu commands by making use of copying and 
pasting layers. 

1 . Select the layer you want to copy. When selected resize 8 handles appear. 

2. Click Copy |® | on the Standard toolbar or press the shortcut key <Ctrl+C>. 

3. Place the cursor at the point where you want to paste the copied layer. If the cursor isn't moved, 
the layer will not be copied. 

4. Click Paste |@]| on the Standard toolbar or press the shortcut key <Ctrl+V>. 

5. Drag the copied layer to the exact position where you want it to be placed. 

H When a layer is copied, all of the layer's properties such as its z-index, visibility, 
background color, size, position, etc., are copied along with it. When you copy a layer, the 
original and copied layers are overlapped so only layer tag mark is displayed where the 
mouse cursor is located. If you want to place the copied layer at another position, you 
can do so by dragging it. 

Q To delete a layer, simply select the layer and press the <Del> key. 

Overlapping layers 

Multiple layers in the same document can overlap each other. The Z-index is the order in 
which the layers are overlapped. Normally, in such cases, the order of the layers from top to 
bottom is the reverse of the order in which they are created (i.e., the layer created last usually 
appears on top). When a layer is created, it is assigned a Z-index of 1 . You can change this to 
any positive or negative integer. The higher the number, the higher the layer is in the 
top-to-bottom order. Layers that have the same Z-index are placed in their reverse order of 
creation. When overlapping layers that have no background color or contain only text of the 
same color, it may be difficult to determine which layers are in front of or behind others. To 
confirm the layer order, check the Layer List window by selecting the [Window > Layer List] 
menu command. 
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1 . Insert several layers in the Edit window. 

2. Move the layers to overlap one another. 

3. Double-click a layer. 

4. Select one of the following methods: 

• Select the layer and specify Z-index in the Layer Inspector and press <Enter>. 

• Double-click the layer. In the Layer Properties dialog box, specify the Z-index of the layer 
and click OK. 



Z-inde 







Z-index 2 









H The layer with a larger Z-index appears on top. 



Viewing the layer list 

You can view the list of all layers inserted in the Edit window using the Layer List window. If 
you select a layer in Layer List window, the Layer Inspector is activated, which enables you to 
modify properties of the selected layer. 

1. Select the [Window > Layer List] menu command, or press the shortcut key <Alt+5>. 

2. The layers window appears and shows the names of all layers, Z (the z-index), and the visibility 
properties. 

3. If you double-click a layer in the Layer List window, the Layer Properties dialog box is opened 
where you can modify the properties of the selected layer. 

Q In the Layer List window, a child layer is displayed with an indentation as you can see 
in the following picture. 



Layer List B 



V Snap to layer 

Name | Z | Visibility 

l ayerl 1 View 
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child layer 



Layers and Time Lines | 233 



Applying effects to layers 



A layer is one of the central elements in Dynamic HTML and used for various dynamic 
effects. You can apply effects to layers by using the Script Wizard, applying actions, or creating 
a Time Line animation. Action refers to the script that triggers a specific action when an event, 
such as a mouse click, occurs. You can perform tasks such as making a hidden image visible, 
getting a description to appear, or making a new browser window pop up by applying actions 



Applying actions and events 

1. Insert a layer by clicking Insert Layer [P] on the Standard Toolbar. 

2. Select the [Window > Action] menu command or press the shortcut key <Alt + 7> to open the 
Action window. 

3. In the Action window, click the Add... button and specify the desired action. 

Action refers to a script triggering a specific action when there happens an event, such as a 
mouse click. Applying actions to layers can create a pop-up image, description, or 
explanation. 

Applying the snap effect to layers 

Lets two nearby layers stick to each other's borders. This effect lets you put together several 
layers or align them to the horizontal/vertical borderline. 

1 . Insert layers in a document. 

2. Select the [Window > Layer List] menu command or press <Alt + 5>. 

3. Check to select Snap to layer in the Layer List window. 

4. The Snap to layer effect is applied to the layers and two nearby layers stick to each other. 



Q If you want to apply snap effect to the entire document, use the Snap effect of Guide 
and Grid. 

Q When applying the snap effect to multiple layers, the last selected layer will be the 
criterion for the snap effect. In other words, the last selected layer is subject to the Snap 
to layer effect. 
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Aligning multiple layers 

You can align multiple layers at once. 

1. Select several layers by clicking them while holding down the <Shift> key. 

2. Click the relevant button in the Layer Inspector or on the Layout Toolbar. You can also select the 
[Format > Layout] menu command. The last selected layer is the criterion of alignment. 

Q If you select multiple layers, the last selected layer is the criterion of alignment. 




Adjusting the size of multiple layers 

You can adjust the size of multiple layers. 

1. Select several layers by clicking them while holding down the <Shift> key. 

2. Click the relevant button in the Layer Inspector or on the Layout Toolbar. You can also select the 
[Format > Layout] menu command. 

Q If you resize multiple layers at once, the last selected layer is used as the criterion of 
resizing. 



Adjusting the spacing between multiple layers 

You can adjust the spacing between layers at once. Selecting more than 3 layers activates the 
Space Across [ED and Space Down LU icon, used for the adjustment of layer spacing. 

1. Select multiple layers while holding down the <Shift> key. 

2. Click the relevant button in the Layer Inspector or on the Layout Toolbar. You can also select the 
[Format > Layout] menu command. 



Fitting the layer size to contents 

You can adjust the layer size automatically to the size of objects inserted in the layer. 

1 . Insert a layer in a document. 

2. Place the cursor in the layer and insert an object. 

3. Select the layer and 8 resize handles appear on the layer border. 

4. Select Fit to Contents 



K in the Layer Inspector or on the Layout Toolbar or select the [Format 



> Layout > Fit to Contents] menu command. 

Layer size is automatically adjusted to the size of the object inserted in the layer. 
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Working with Time lines 



Inserting a layer into a Time Line 

You should first insert a layer in the Time Line window in order to create a Time Line 
animation using the layer. 

By inserting a layer into a Time Line, you create a sprite, which is a set of frames that 
determines how the layer moves over an interval of time. Each frame in a sprite contains 
information about the position of the layer at a particular time. By adjusting the position of 
the layer at different frames, you can make the layer move. You can have as many sprites in a 
Time Line as you want, and each sprite can represent the same layer or different layers. 

Inserting a layer into a Time Line by drag-and-drop 

Drag the layer by its handle into the Time Line window and drop it when the blue bar is at the 
position you want. A sprite containing 1 6 frames will be created at the drop location. 

1. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing 
<Alt + 4>. 

2. Select a layer and drag its layer handle into the Time Line window. 

3. A sprite in a gray bar shape and two key frames in a circle shape (O) are created in the Time 
Line window. 

jiirneinel ^] | H [ ■< | [i [T] fl5 frame/f. F Autost*t F Repeat 
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E3 ^ the layer handle is not visible, or if the mouse-pointer doesn't turn into a hand when 
it's over the handle, click inside the layer first, then drag it to the Time Line window. 

Inserting a layer into a Time Line using the Time Line shortcut menu 

Used when it is difficult to drag a layer into the Time Line window. 

1. Select the layer by clicking its layer handle. (If the layer handle isn't visible, click inside the layer 
first.) 

2. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing 
<Alt + 4>. 

3. Select {Insert Layer} in the shortcut menu of the Time Line window. 

4. A sprite in a gray bar shape and two key frames in a circle shape (O) are created in the Time 
Line window. 
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H Sprite refers to a series of frames that describes the positions and movement of one 
layer over an interval of time. At the left appears a name of a layer, controlled by the 
sprite. You can create multiple sprites for each layer and modify its position and length as 
that you want. 

Recording the path of a layer 

Recording the path of a layer lets you record complicated movement of a layer using a simple 
mouse drag. 

1. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing 
<Alt+4>. 

2. Select a layer whose movement is to be recorded in the Edit window. 

3. Click frame 1 to place the current frame indicator at the frame 1 . Select Record Path of Layer in 
the shortcut menu. 

4. When the mouse-pointer turns into r * s , drag the layer along the path you want the layer animation 
to take. 




5. A sprite is created in the Time Line window. Click one of the frames and the position of the layer is 
displayed in the Edit window. 

6. Check to select the Auto start option and check if the layer animation works properly in the 
Preview window. 

23 To make the butterfly disappear, specify the position of the layer outside the Edit 
window at the last frame. In other words, select the last frame in the Time Line window 
and drag the layer containing the butterfly image outside the Edit window area. 

Creating a straight-line animation 

These instructions assume you already know what layers and Time Lines are, how to insert a 
layer into a Time Line, and how to create a simple, straight-line animation. 

Creating a path by using the Time Line window 

1 . Insert a layer in the Time Line window. 

2. Key frames are displayed at the both end of the sprite. Click the key frame and a red current frame 
indicator is placed over the key frame. Click the right key frame. 

3. Change the position of the layer by dragging its layer handle. A straight line appears connecting 
the first and the last position of the layer. 
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4. 



Specify the Auto start and Repeat. 
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5. Click one frame between the first and last frame to check the position of layer at that frame. Check 
whether the layer animation works properly in the Preview window. 

Creating a path by dragging the layer 

6. Move the object you want to animate into a layer and insert the layer into the Time Line, creating a 
sprite. 

7. In the Time Line window, click the first frame of the sprite (indicated by a white dot at the left end 
of the sprite). The current frame indicator (the vertical red line) will move to that frame, if it isn't 
there already. 




8. Switch to the Edit window and drag the layer to the desired starting position. 

9. Switch back to the Time Line window and click the last frame of the sprite. The current frame 
indicator will move to that frame. Back in the Edit window, drag the layer to the desired end 
position. A thin black line will appear between the starting position and the ending position, 
indicating the path of the animation. 

10. To preview the animation you just created, click Auto start in the Time Line window, then switch to 
the Preview tab. 

Q You can have an animation start from, or end at, an invisible position above or to 
the left of the window by entering negative numbers for the horizontal and/or vertical 
coordinates. Similarly, the animation can start from or end at an invisible position below or 
to the right of the window if you enter coordinate values that are larger than the size of 
the window. 

Creating a path using the arrow keys 

1 . Move the object you want to animate into a layer and insert the layer into the Time Line, creating a 
sprite. 

2. Click the first frame of the sprite. Switch to the Edit window. Make sure the layer is still selected. 
Using the arrow keys, move the layer to the desired starting position. Each press of an arrow key 
moves the layer one pixel. Hold down the <Shift> key to move the layer ten pixels with each press 
of an arrow key. 

3. Switch back to the Time Line window and click the last frame of the sprite. Switch again to the 
Edit window (making sure the layer is still selected) and use the arrow keys to move the layer to 
the desired ending position. 
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Creating a curved-path animation 

There are two ways to create a curved-path animation (one in which the layer moves in a 
relatively complex path between three or more defined points). 

Creating a curved path by inserting keyframes in a straight path 

1 . Create a straight animation. Set the starting and ending positions of the sprite as desired. 

2. Click a frame where you want to insert a keyframe. 

3. Right-click the sprite and select {Insert Keyframe} in the shortcut menu. A new key frame 
(indicated by a white dot - O) will be created at the position of the current frame indicator. 
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Click the newly created key frame. The red current frame indicator is placed over the new 
keyframe. Without moving the current frame indicator, drag the layer to the position where you 
want the layer to be when the keyframe you just created is reached when the Time Line is played. 
When you release the mouse button, the black line in the Edit window indicating the path of the 
layer will change shape, reflecting the new path. 

A curved line connecting the three keyframe is created. For each additional position that you want 
to specify in the path, repeat steps 2 through 4, creating new keyframes and dragging the layer to 
the desired position at each keyframe. 



Recording the path of a layer as you drag it 

You can create a layer animation following the trace of the mouse by clicking a keyframe in 
the Time Line window and selecting {Record Path of Layer} in the shortcut menu. 

1. First, make sure the layer you want to animate is selected in the Edit window (its resize handles 
should be visible). 

2. Right-click anywhere in the Time Line window and select Record Path of Layer in the shortcut 
menu. The mouse-pointer will turn into an arrow with a tiny tape cassette icon underneath it. 

3. Click inside the layer handle and drag the layer through the path that you want it to take. As you 
drag the layer, small x marks will appear along the drag path. When you release the mouse button, 
a new sprite will appear in the Time Line window, containing as many keyframes as necessary to 
define your path. 

H After creating a sprite this way, you can fine-tune the position of the layer at each 
keyframe or add new keyframes using the technique in Method 1 . 
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Attaching actions to a Time Line 

Probably the most powerful aspect of Time Lines is the ability to attach actions (scripts) to 
specific frames in a Time Line. When the Time Line reaches a frame with an attached action, 
the action is executed by the browser. 

Since any action can be attached to a Time Line frame, the possibilities of orchestrating 
dynamic effects using Time Lines is limited only by your imagination. Sometimes, it may 
even be desirable to create a Time Line that contains no layer animations at all, but only 
causes various actions to be executed over time (with or without visitor interaction). 

1. Open the Time Line window by selecting the [Window > Time Line] menu command or pressing 
<Alt + 4>. 

2. Select the frame to which you want to attach an action and Add., in the Action window. (You can 
open the Action window by selecting the [Window > Action] menu command or by pressing the 
shortcut key <Alt + 7>.) 

3. In the Action Properties dialog box, select Event and Action and set the Parameters, which 
differs with each type of action. 

4. Click OK and A, which implies that an action has been inserted at the frame, is displayed on the 
action row as below. 
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5. Check the result in the Preview window. 

Q Netscape may not properly display an action inserted in a Time Line animation. 

Q In order for action attached to a Time Line to be executed, there must be at least one 
sprite in the Time Line, because a Time Line with no sprites will not play If that you want 
to use a Time Line solely to trigger action, not to animate layers, create a single sprite 
using any layer (an empty layer will work) and place the sprite anywhere in the Time Line. 
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Chapter 16 

Forms 

Form Overview 
Inserting Form Fields 
Changing form field properties 




Forms are a great way to add interactivity to any site. Use them to collect information 
and communicate with visitors, as well as giving them control 

over their online experience. 




Form Overview 



What are Forms? 

A form is part of or an entire document, designed to obtain user inputs or dynamically 
show data to site visitors. A form only obtains or shows data; what actually processes the 
data is a server-side program, usually a Common Gateway Interface (CGI), not the form 
itself. 

A form consists of many different types of form fields, actions and methods. The form 
action and method defines how the data should be processed. User inputs taken from a 
form are sent to Web server and processed by a CGI. Many different types of CGIs are 
often provided by the Web site hosting vendors, or you can program to give more 
interaction to your site. Most commonly used CGIs are shopping cart applications, 
on-line ordering systems, and search engines. 

It's important to note that simply having a form on your Web site is not sufficient—you 
must also have a program on the Web server that will do something with the information 
provided in the form. Namo WebEditor provides ways to easily add forms to your site, 
but it's up to you to provide the server software to handle those forms. 

Take the following steps to create a form field with Namo WebEditor. 

1 . Determine the type of information that you want to gather from your site visitors. 

2. Determine the relevant form fields for the target information. 

3. Insert the form fields in your document and specify the properties of each item. 

4. Determine the method to deal with the information so that the form can properly function. 

Form Field 

Form fields are types of methods used when the site visitors input data to the form. The 
input data is transmitted to the Web server and processed by a CGI for further actions. 
Each type of form field provides different functions for others. 
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Inserting Form Fields 



Inserting a one-line text box 

The one-line text box allows a site visitor to input text. To add a one-line text box, do this: 

1 . Place the cursor where you want to insert a one-line text box. 

2. Select the [Insert > Form Field > One-Line Text Box...] menu command. 

3. Enter 'name' in Name and leave Initial value blank, so that the text box is displayed empty. 

4. Set Width in Characters to '20', Maximum length to '20' and Input type to 'Standard text'. 

5. Click OK 

6. You can modify the size of the text box by selecting the text box and dragging its resize handles. 
You can also modify the properties of the box in the One-Line Text Box Properties, which appears 
when you double-click the text box. 

Name:i «=i+ 

Inserting a check box 

1 . Place the cursor where you want to insert a check box. 

2. Select the [Insert > Form Field > Check Box...] menu command. 

3. Set Name to 'editor' and Value to 'namo'. 

4. Set Initial state to 'Selected. Initial state refers to the state your Web browser displays when it 
loads the Web document. 

5. Click OK 

6. To modify the properties of a check box, double-click it. The Check Box Properties dialog box 
appears. 

I~~ Namo WebEditor 
Inserting a scrolling text box 

The scrolling text box allows a site visitor to enter more than one line of text. To add a 
scrolling text box, do this: 

1 . Place the cursor where you want to insert a scrolling text box. 

2. Select the [Insert > Form Field > Scrolling Text Box...] menu command. 

3. Enter 'scroll' in Name and leave Initial value as blank, so that the text box will be displayed empty 

4. Set Width in Characters to '20', and Number of lines to '5'. 

5. Click OK and a scroll text box is inserted as follows. 

I 1 

J 

6. You can modify the size of the scrolling text box by selecting the scrolling text box and dragging 
the resize handles. You can also modify the properties of the box in the Scrolling Text Box 
Properties dialog box, which appears when you double-click the scrolling text box. 

Q The input type for the scrolling text box is always plain text. 
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Inserting radio buttons 

Radio buttons are generally used to allow the site visitor to select just on item from a group of 
mutually exclusive items. 

1 . Place the cursor where you want to insert a radio button. 

2. Select the [Insert > Form Field >Radio Button...] menu command. 

3. Set Name to 'editor' and Value to 'namo'. 

4. Set Initial state to 'Selected'. Initial state refers to the state your Web browser displays when it 
loads the Web document. 

5. Click OK and the radio button is inserted as follows. 

6. To modify the properties of a radio button, double-click it. 
Inserting a drop-down menu 

7. Select the [Insert > Form Field >Drop-Down Menu...] menu command. 

1 . Enter the name of drop-down menu in Name. 

2. Click Add.... 

3. In the Drop-Down Menu Settings dialog box, enter a Name and Value. To have the added item 
displayed as checked, choose Selected. Click Add... and repeat this step until you complete 
adding all the required drop-down menus. 

4. Specify Height. If you specify a number smaller than the number of items, a scroll bar appears. 

5. Select Allow Multiple selection check box if that you want. 

6. Click Style... to apply any styles to the fields. 

7. Click OK. 

8. If that you want to attach an action, open the Action window by selecting the [Window > Action] 
menu command or by pressing the shortcut key <Alt + 7>. 

9. Select the drop-down menu and click Add... in the Action window to apply any actions. 
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Inserting a push button 

A push button allows the site visitor to give the Web browser a command regarding the form, 
such as "Submit this form now" or "Clear this form". Sometimes, a button is used in 
combination with a JavaScript action that performs some function when the button is clicked. 

1. Select the [Insert > Form Field > Push Button...] menu command. 

2. Enter a name to identify the button in Name. 

3. In Value, enter the text to use as the button's label. If the button type is Submit, this value is also 
sent to the server. 

4. Select a Button type. If you set the type to Submit, the button will cause the values in the form to 
be sent to the server. If you set it to Reset, the button will cause the form to be cleared. If you set it 
to General, the button doesn't do anything by itself; it needs to have an attached JavaScript action 
that performs some function when the button is clicked. 

5. Click Style... to apply any styles to the fields. 

6. Click OK. 

7. If that you want to attach an action, open the Action window by selecting the [Window > Action] 
menu command or by pressing the shortcut key <Alt + 7>. 

8. Select the push button and click Add... in the Action window to apply any actions. 

submit 

Inserting an image form field 

An image form field is an image that acts as a kind of submit button in a form. Like a 
standard submit button, when clicked, it causes the information in the form to be sent to the 
Web server. Unlike other submit button, however, an image form field also sends the X-Y 
coordinates of the point in the image where the site visitor clicked it. This information is sent 
in the following format: 

f ield_name .x = x_of f setf ield_name . y = y_offset 
For example, if the image fonn field's name is "imagebtn", the sent values might be: 

imagebtn.x = 92imagebtn.y = 30 

To insert an image form field, do this: 

1. Select the [Insert > Form Field > Image...] menu command. 

2. Enter Name to identify the image form field. 

3. Enter the Path to the desired image file. Click Browse... [^j to locate and select a file on your 
local drive, click Clip Art... [||] to select an image from the Clip Art library, or click Site... to 
select an image file among the current site's documents. 

4. Set Vertical alignment. You can preview the layout through the small icon right next to the 
drop-down menu, which shows the position of the image form field and text. 

5. Specify the Size and Margins and borders. 

6. Click Style... to apply any styles to the fields. 
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7. Click OK. 

8. If that you want to attach an action, open the Action window by selecting the [Window > Action] 
menu command or by pressing the shortcut key <Alt + 7>. 

9. Select the image form field and click Add... in the Action window to apply any actions. 
Inserting a hidden form field 

A hidden field is used to store a static value that is sent to the server along with the rest of the 
information in a form. However, it is invisible to the visitor. You might use a hidden field, for 
instance, to send the filename of the document containing the form. 

1. Select the [Insert > Form Field > Hidden Form Field...] menu command. 

2. Enter a Name to identify the hidden form field. 

3. Enter the Value that will be sent to the server. 

4. Click OK. 

H In the Edit window, a hidden form field is indicated by with a small yellow tag mark 
that looks like a partially obscured check box. This mark is not visible in a browser 
or the Preview window. 
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Modifying Form Properties 



Modifying form properties 

The Form Properties dialog box is where you specify, among other things, the server program 
that will handle the form. 

1. Select {Form Properties...} in the shortcut menu by right-clicking inside the form you have 
inserted in the Edit window. 

2. In the Form Properties dialog box, specify the Form name. This name is not sent to the server; it 
is only used to differentiate the form from others in the same document. 

3. When using frames, specify Target frame. If submitting the form results in a different Web 
document being opened by the browser, the target frame setting determines which frame or 
window the other document is opened in. Leave blank to use the same frame or window. 

4. Specify the path or URL of the form handler in Action. This is usually a CGI or other type of 
program on the server. If you enter 'mailto:' followed by an email address, the form content will be 
emailed by the browser to that address. 

5. Specify the method of transmitting the form contents to the server program in Method. The 
choices are GET and POST. If the form data will be saved by the server program, or if the form 
data will be e-mailed, choose POST. If in doubt, it is recommended to choose POST. 

6. Specify Encoding type. The Encoding type is the MIME type that the form contents should be 
treated as. If the contents are plain text, leave this blank or enter 'text/plain'. 

7. Click OK. 
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Remove Form 



H The Remove Form button may be used to remove the form tags of the current form. 
It does not remove the form fields. 
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Changing form field properties 

1. Double-click the form field you have inserted in the Edit window. 

2. The corresponding form field properties dialog box appears. 

3. Make the modifications you need and click OK. 

H If you activate Show/Hide Special Tag Marks on the Standard toolbar, the 
position of an inserted form tag (<form></form>) is displayed as a black dashed rectangle. 
In case the [Insert > Form Field > Insert with Form Tags] menu command is selected, a 
tag is inserted every time you insert a form field. If you do not want to insert a form tag 
along with a form field, do not select Insert with Form Tags from the menu. 

[p Namo^ebEditoT" H 

L The Position of the Form tag 
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Chapter 17 

Scripting and Dynamic HTML 

Using the Script Wizard 
Attaching Actions to Objects 

JavaScript is the most popular standard for creating dynamic Web sites. Namo 
WebEditor includes a powerful set of scriptingfeatures to help 
make your sites more engaging and interactive. 



The Script Wizard and Actions 



What is a Script? 

A script is a small program written directly into an HTML document. JavaScript and 
VBScript are the most commonly used script languages. Scripts are mainly used to give 
dynamic effects such as rollover buttons, scrolling text in the status bar, slide layer, and 
so on. 

Scripts and HTML Documents 

HTML is a markup language which was developed to display information. It does not 
provide any interactions between users and the document itself, nor does it display 
information dynamically. So we can say that HTML is very 'static'. Scripts cover these 
drawbacks of HTML. You can apply any dynamic effects that take place when an event 
occurs. 

Actions and Events 
What is an action? 

An action is JavaScript script that is executed by the Web browser when an event occurs 
to trigger it. Many types of scripts are provided in Namo WebEditor as actions, and all 
actions are designed to work in popular browsers such as Internet Explorer and Netscape 
Navigator. Some of the most commonly-used actions include those that: replace an image 
with another image (a "rollover" action), open a dialog box to show a message to the site 
visitor, and show or hide a layer in the document. 

What is an event? 

An event, in the context of Web documents, is something that a site visitor viewing a Web 
page does in order to trigger an action, such as the opening of a new browser window. 
Clicking on an object in the page (such as a layer) is an event; so is merely moving the 
mouse pointer over an object. Events are used by scripts in Web pages to "know" when to 
execute actions. The Web browser constantly checks for events and notes when and 
where an event takes place. If the event occurs, as specified in a script in the page's 
source, the browser executes the specified action. Not every event is applicable to every 
type of object. For instance, onKeyPress is not applicable to layers, since layers do not 
accept text input—only certain kinds of form fields do. If an event is not applicable to an 
object, Namo WebEditor does not allow you to associate an event with it. 

H When you use the Script Wizard, the event by which an action occurs is predefined, 
leaving you to decide only the parameters. On the other hand, by using an action you can 
decide on the event that will trigger the action, as well as the parameters. 
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Working with Scripts in Namo WebEditor 



Script Wizard and Actions 

The Script Wizard is a step by step guides to add a dynamic effect chosen among 1 8 
popular scripts. With minimal option settings, it automatically generates JavaScript code 
for the selected effect. 

An action is also a script. Unlike the Script Wizard, you can choose various effects from 
85 actions selectively, or even combine them to create more dynamic and complex 
effects. 

Body Script and Document Script 

If you are familiar with a script language, you can manually add scripts into your Web 
document. The Body Script, which is inserted in the 'head' of the HTML, applies to the 
entire document. On the other hand, the Document Script applies only to a specific part of 
the document and is inserted within the 'body'. You can insert these scripts directly into 
the HTML window, or select the [Insert > Script >Body Script... /Document Script...] menu 
command to insert them in the text box. 

Script Manager 

The Script Manager is a tool for managing objects and scripts attached to a Web document. 
It shows a tree of objects such as images or hyperlinks, and any scripts and actions 
applied to them. You can add, modify or delete actions and/or scripts easily using this 
tool. 

The Script Wizard 

The Script Wizard automatically generates JavaScript code necessary for the selected 
effect and inserts it into the HTML source of the Web document, enabling you to use 
popular JavaScript effects without writing a single line of code. The Script Wizard 
provides 18 different types of script effects. 



Menu and Navigation 



Text Menu 


Makes a text menu, into which you can add various actions. 


Drop-down Menu 


Makes a drop-down menu that can contain multiple 
hyperlinks. 


Expanding 
Navigation Menu 


Makes a tree- structured menu which expands and collapses 
as you click on the menu with sublevel items. 
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Special Effects 



Background Fade 
In/Out 


Changes the background color gradually as you enter or exit 
the page. 


Wipe Effect 


Clears a document or a layer gradually by removing the 
colored cover over it. 


Floating Layer 


Makes a layer that remains still in the specific position even if 
you scroll the page. 


Slide Layer 


Makes a layer appear from the top or left edge of the window. 


Mouse Trails 


Makes layers trail the mouse pointer. 


Scrollers 


Marquee 


Makes the contents in a layer flow from one side to the other. 


Scrolling Text in a 
Box 


Makes a line of text scroll in a text box. 


Scrolling Text in the 


Makes text scroll in the status bar. 


Image Effects 


Rollover Effect 


Replaces the current image with another image when the 
mouse pointer is placed over the image. 


Animation Effect 


Applies animation to a page element such as a paragraph or an 
image, causing it to move in a specified way when the page is 
loaded in a browser. 


Link and Buttons 


Link Button 


Makes a button that moves you to the previous page, next 
page, or any other specific URL. 


Rotating Banner 


Makes a banner that changes its image and hyperlink 
periodically. 


Utilities 






Popup Window 


Opens a new browser window when at a specific condition. 




Clock 


Shows the current time in a text box. 




Access Information 


Asks for visitor's name in a pop-up window, or shows 
information such as update information, the visitor's IP 
address, or the visitor's host name. 
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Action List 

Following is the list of actions supported by Namo Web Editor. 
Image 



Preload Image 


Preloads an image when the document is loaded in a 
browser. 


Replace Image 


Replaces an image in the document with another image. 


Resize Image 


Resizes an Image. 


Restore Image 


Restores an image after it has been replaced with another 
image. 


Status Bar 


Erasing Status bar 


Repeatedly writes and erases the text in the status bar. 


Flashing Status bar 


Makes the text in the status bar flash. 


Insert Text in Status 
bar 


Displays a message in the status bar of the browser. 


Shooting Status bar 


Displays text in the status bar by shooting characters one 
after another. 


Apply X-ray Effect 


Makes the objects show only their outlines. 


Blink Effect 


Makes the window blink. 


Remove Filter Effect 


Removes the filter effect. 


Form 


Move Focus to 


Moves the focus to a specific form field. 


Null Validation of 
Form Field 


Checks whether the text field is blank or not. 


Number Validation 


Checks whether the value in the text field is a number. 


Reset Form Field 


Clears a specific text form field. 


Restrict Text Length 


Checks the maximum length of the text field. 


Select Text 


Selects texts in a specific text form field. 


Validate Email 


Checks whether the entered email address is valid. 


Validate Form 


Check whether there is a blank text form field in the 
specified form. 



Scripting and Dynamic HTML | 253 



Layer 



Clip Layer 


Clips off a portion of the layer. 


Glide Layer 


Glides a layer to the position specified. 


Hide Layer 


Makes the layer invisible. 


Insert Text to Layer 


Inserts a text to the layer. 


Make Layer Tooltip 


Makes a tooltip for the target layer. 


Move Layer by 


Moves the layer by the amount of offset specified. 


Move Layer to 


Moves the layer to the position specified. 


Resize Layer 


Resizes a layer. 


Set Background 
Image of Layer 


Sets the background image of a layer. 


Set Background 
Color of Layer 


Sets the background color of the layer. 


Set Z-index 


Sets the Z-index of a layer. 


Show Layer 


Makes the layer visible. 


Wipe Layer 


Shows a layer with wiping effect. 


Write Last Update 


Displays last update information in a layer. 


Filter 


Apply Alpha Effect 


Sets the opacity of a specific object. 


Apply Blur Effect 


Applies a blurry shadow effect to an object. 


Apply Chroma Effect 


Makes a specific color transparent. 


Apply DropShadow 
Effect 


Applies a shadow effect that makes objects appear 
floating. 


Apply Fliph Effect 


Creates a horizontal mirror image of the target layer. 


Apply Flipv Effect 


Creates a vertical mirror image of the target layer. 


Apply Glow Effect 


Applies a glow filter to the target layer. 


Apply Gray Effect 


Applies a gray filter to the target layer. 


Apply Invert Effect 


Inverts every color property inside a layer. 


Apply Mask Effect 


Makes the transparent part of a layer have specific color, 
and makes the other part transparent. 


Apply Motionblur 
Effect 


Sets the blurriness of an object. 


Apply Shadow Effect 


Applies shadowing to the objects in the target layer. 




Distorts an object into a wavy shape. 
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Window 



Change URL of 
Window 


Changes the URL of the current window. 


Check Browser 


Loads a different page depending on the browser type. 


Check Plugin 
Installation 


Loads a different page depending on the browser type. 


Close Window 


Opens a pop-up window that asks whether to close the 
current window. 


Open Full Window 


Opens a full window. 


Open Message 
Window 


Shows a window that contains a message. 


Open URL 


Opens a new browser window with the specified settings. 


Open URL After Delay 


Moves to a new URL after a specific delay time. 


Open Sponsor 
Window 


Opens an additional window with a specific URL when a 
hyperlink is clicked. 


Popup Message 


Displays a dialog box containing a message. 


Redirect by 
Operating System 


Redirects the user to a new URL according to the user's 
operating system. 


Redirect By Screen 
Resolution 


Redirects the user to a new URL according to the user's 
screen resolution. 


Redirect with Alert 
Message 


Redirects the visitor to a new URL with an alert message. 


Reload at Intervals 


Reloads the window at specific intervals. 


Reload Window 


Reloads the window. 


Resize Window by 


Resizes the window by the amount of value specified. 


Resize Window to 


Resizes the window to the size specified. 


Rotate Window 


Rotates the window. 


Shake Windows 


Shakes the window as many times as specified. 


Spreading Window 


Opens a window by gradually enlarging it. 


Frame 


Break Frame 


Prevents the document from being included in a frame. 


Merge Frames 


Opens a URL without frames in the current window. 


Update Three Frames 


Updates three frames at a time. 




Updates two frames at a time. 
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Other 



Call JavaScript 
Function 


Calls a JavaScript function stored in the current document. 


Go to Timeline Frame 


Moves to a specific frame of the timeline. 


Hide Object 


Makes a specific object invisible. 


Pause Windows 
Media Player 


Pauses the playback of the Windows Media Player 
embedded within the document. 


Play Timeline 


Starts or restarts a timeline animation. 


Play Windows Media 
Player 


Plays the Windows Media Player embedded within the 
document. 


Prevent Right Click 


Prevents mouse right-click event. 


Print Document 


Lets you print the current document. 


Scroll Page 


Scrolls the web page by the amount specified. 


Set Background 
Image 


Sets the background image of the document. 


Set Background 
Color 


Sets the background color of the document. 


Show Object 


Makes a specific object visible. 


Stop Timeline 


Stops playback of a timeline animation. 




Stops the playback of the Windows Media Player 
embedded within the document. 
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Event List 



Following is the list of actions supported by Namo Web Editor. 



Event 


Description 


onAbort 


Occurs when the visitor cancels loading a page that is in the 
process of loading, such as by using the browser's Stop 
button or clicking a hyperlink to move to a different page. 


onError 


Occurs when the browser encounters an error while loading 
the page or an image. 


onResize 


Occurs when the browser size is adjusted. 


OnScroll 


Occurs when the browser screen is scrolled. 


onLoad 


Occurs when the browser finishes loading the relevant 
object, such as an image. 


onUnload 


Occurs when the browser leaves the current page. 


onBlur 


Occurs when a form field loses "focus". (See onFocus.) 


onChange 


Occurs when the visitor edits the contents of a form field and 
then leaves the field. 


onFocus 


Occurs when a form field becomes the target of the visitor's 
key stroke, due to being selected by the visitor's clicking in 
the field or moving to it using the tab key. 


onKeyDown 


Occurs while the visitor is holding a key down while within a 
form field. 


onKeyPress 


Occurs while the visitor is holding a key down while within a 
form field. 


onKeyUp 


Occurs when the visitor releases a key while within a form 
field. 


onSelect 


Occurs when the visitor selects all or some of the contents of 
a form field. 


onClick 


Occurs when the visitor clicks the object referred to by the 
script using the mouse. 


onDblClick 


Occurs when the visitor double-clicks the relevant object 
using the mouse. 


onMouseOut 


Occurs when the mouse pointer exits the bounds of the 
relevant object. 


onMouseOver 


Occurs when the mouse pointer enters the bounds of the 
relevant object. 


onMouseDown 


Occurs when the visitor clicks on the relevant object, in the 
"up to down" part of the click. 
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Using the Script Wizard 



Using the Script Wizard 

Use the Script Wizard to add a variety of popular dynamic elements and effects to your Web 
documents. 

1 . To start the Script Wizard, click Insert Script Wizard on the Standard Toolbar, or use the [Insert > 
Script > Script Wizard] menu command. 

2. The first step in using the Script Wizard is selecting the dynamic effect or element that you want 
to use. 

3. After making your selection, click Next and go through one or two simple steps to finish adding the 
selected effect or element to the current document. 

A note about browser compatibility 

The effects and dynamic elements created using the Script Wizard use JavaScript. 
Consequently, they do not work in Web browsers that do not support JavaScript. Internet 
Explorer 4.x and Netscape 4.x and higher support JavaScript. For other browsers, try 
previewing a document containing the Script Wizard effects; if the browser supports JavaScript, 
the effect should work. 

Q Complete information on each of the Script Wizard effects and elements is available in 
Namo WebEditor's online help system. For help with any Script Wizard dialog box, simply 
press <F1> while viewing the dialog box. 
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Attaching Actions to Objects 



By attaching an action to an object in the document (such as an image), you can have the 
action triggered by some event involving the object. 

There are two ways to attach an action to most types of objects. These methods are described 
below. 

Attaching an action to objects using the Action window 

1 . Click to select the desired object in the Edit window. 

2. In the Action window, click Add... to open the Action Properties dialog box. 

3. Select an event and an action using the drop-down menus in the Action Properties dialog box. 
Please refer to Event List and Action List. 

4. Edit the parameters of the action in the Parameters list box. 

5. Click OK. You can preview the action by switching to the Preview window. 

Attaching an action using the Script Manager 

The Script Manager lets you manage all the actions in a document from one window. 

1. Select the [Window > Script Manager] menu command to open the Script Manager dialog box. 

2. In the hierarchical list of eligible objects on the left side of the dialog box, select the object that you 
want to attach an action to. 

3. Click Add... to open the Action Properties dialog box. 

4. Select an event and an action using the drop-down menus in the Action Properties dialog box. 

5. Edit the parameters of the action in the Parameters list box. 

6. Click OK twice to close the dialog boxes. You can preview the action by switching to the Preview 
window. 

H These methods cannot be used to attach actions to a Time Line. For help on 
attaching actions to a Time Line, see Inserting Actions in a Time Line. 
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Types of objects that can have attached actions 

Not all types of page elements can have actions attached to them. The objects to which you 
can attach an action include: 

• Images 

• Layers 

• Hyperlinks 

• Forms, form fields, and form controls 

• the document itself 

/£> Some of the JavaScript actions supported by Namo WebEditor are not supported by 
Netscape. 

Inserting actions in a Time Line 

An action can be attached to a frame in a Time Line animation. The action will be triggered 
when the animation reaches the frame to which it is attached. 

To attach an action to a frame in a Time Line, follow the steps below. 

1 . Select the [Window > Time Line] menu command or press the shortcut key <Alt + 4> to open the 
Time Line window. 

2. Click to select the frame to which you want to attach an action and click Add... in the Action 
window. 

3. Select an event and an action using the drop-down menus in the Action Properties dialog box. 
Please refer to Event List and Action List. 

4. Edit the parameters of the action in the Parameters list box. 

5. Click OK twice to close the dialog boxes. In the Time Line window, an A will appear in the A row 
above the frame to indicate that an action has been attached. You can now preview the action by 
switching to the Preview window. 
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Chapter 18 

Database-Enabled Documents 

Database Wizard Overview 
Using the Database Wizard 
Creating Blocks 
Adding Block Elements 
Modifying database-related properties 



The Database Wizard lets you create database-driven dynamic Web pages without any 
knowledge of Web programming by automatically generating the necessary instructions 
to tell the Web server how to obtain information from a database and present it in a 

Web document. 



Database Wizard Overview 



What is a Database? 

A database is, to put it in the most general terms, simply a collection of data. The "data" 
can be any kind of information, such as employee names, movie titles, cake recipes, etc. 
"Collection" means a set of similar data, such as a list of employee names, a book of 
recipes, and so forth. A list of music CDs is a kind of database, while a tuna fish 
sandwich and the state of Nevada are not, because those two items are neither data nor 
similar (except possibly in metaphorical terms). 

In computer terms, a database is a file (or a set of files) that contains one or more 
collections of data that is organized in such a way you can store, manage, and operate. 
Telephone directory, address list, book list, and customer information in a bank or a 
department store are good examples of database. 

A database stores each collection of similar data in a table. A music lover's database, for 
example, might have one table that contains information about every CD in her collection, 
another table that contains information a list of her favorite artists and songs, and so forth. 
Inside a table, the information about a single entity (a music CD, for example) is stored 
in a record. The record might contain such data as the CD's title, the artist's name, the title 
of each song, the length of each song, the total length, etc. Records are arranged by fields 
(also called entity or columns, by analogy with spreadsheet tables). Each field in a record 
contains one piece of data, such as the CD title. 

Below is an example database table containing information about a music CD collection. 

Fields (columns) 

Title Artist Genre Playing Time 

BoyforPele Tori Amos Pop/Rock 71; 10 

Joshua Judges Ruth Lyle Lovett Country 53:48 

Symphony No. S Beethoven classic 33; 12 



In the table, each row contains one record, while each column represents a field. When a 
database contains more than one table, it is common practice to refer fields by the table 
name and the field name together. 

Databases can be created by many applications. Some popular ones include Microsoft 
Access, dBase, Paradox, and Oracle. Regardless of which application you use to create a 
database, if the database can be accessed through ODBC, you can use Namo WebEditor's 
Database Wizard to create database-enabled documents that access the information in the 
database. 



Records 
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What is a Database-Enabled Web Document? 



A database-enabled (also called dynamic or database-driven) Web document is a Web 
document in which some or all of the content comes from a database. The benefit of 
getting content from a database is that when the data in the database changes, the Web 
document also changes, automatically. 

In an ordinary (non-database-enabled) Web document, you provide all the content when 
you create the document. If you want to update the content, you have to open the 
document in a Web authoring tool (such as Namo WebEditor) and edit it by hand. Say 
you have a Web page that contains a list of all your music CDs, and you also have a 
Microsoft Access database that contains information about your CD collection. When 
you add a CD to your collection, if your Web document is an ordinary one, not only do 
you have to add the new CD info to your CD database, you also have to edit the Web 
document to insert the CD info there. But if your Web document is database-enabled, the 
Web page updates automatically when you update the database, saving your time and 
effort. The advantage is even clearer if you imagine a large online shopping site 
containing hundreds or thousands of pages with all kinds of frequently-changing data: 
product names, prices, stock status, and the like. Updating all those documents by hand 
whenever changes were made to the catalog would be extremely burdensome. But if the 
online merchant has all the information in a database, it makes sense to get the content of 
the Web pages from the database, thus avoiding the need for manual updates. 

To "pull" data from a database and display it in a browser, database-enabled documents 
contain computer instructions (code) that tell the Web server where to look for the 
information in a database and how to present it. These instructions can be written in a 
variety of programming languages, including JavaScript, VBScript, and Java. Fortunately, 
you don't have to write any code to create a database-enabled document, because Namo 
WebEditor's Database Wizard generates the code - the script language which will be 
executed in the server - for you, after walking you through the process of selecting the 
database, selecting the parts of the database you want in your document, and deciding 
how to present the information to your Web site visitors. 

Several different formats for database-enabled documents exist. Namo WebEditor 
supports the following three types: 

Microsoft Active Server Pages (ASP) 

For more information, visit http://msdn.microsoft.com/workshop/server/asp/aspover.asp. 

PHP Hypertext Preprocessor (PHP) 

For more information, visit http://www.php.net 

Sun Java Server Pages (JSP) 

For more information, visit http://java.sun.com/products/jsp 
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Requirements for Using the Database Wizard 

Before you use the Database Wizard, please make sure that you meet the following basic 
requirements. 

An ODBC-compatible database 

The Database Wizard creates dynamic documents that obtain all or part of their content 
from a database. Thus, a database is required to use the wizard. The database should 
reside on a server on the same local area network as your computer and the Web server 
(this could be the Web server itself). Namo WebEditor supports ODBC, JDBC, and 
TCP/IP (for MySQL databases) connections from the Web server to the database. 
However, Namo WebEditor itself uses only ODBC to connect to the database for the 
purpose of obtaining information about the fields in it; therefore, the database must 
support ODBC. 

Microsoft Personal Web Server (PWS) or Internet Information Server (IIS) installed on 
your computer 

To be able to preview database-enabled documents that you create using the Database 
Wizard, you must have either Microsoft Personal Web Server (PWS) or Microsoft 
Internet Information Server (IIS) software installed on the computer on which you use 
Namo WebEditor. Additional software is required in order to preview PHP or JSP 
documents. For PHP documents, you need PHP for Windows, downloadable from the 
official PHP site at http://www.php.net. For JSP documents, you need JSP server software 
for Windows installed on your computer. Please refer to Sun Microsystems' list of JSP 
servers at http://java.sun.com/products/servlet/industry.html. 

Web server software that supports ASP, PHP, or JSP documents 

Depending on which dynamic document format that you want to use, your Web server 
software should be capable of executing ASP, PHP, or JSP-format documents. 

If your Web server runs Microsoft IIS or PWS, no additional software is required to run ASP 
scripts. 

If your Web server runs Unix or Linux and that you want to use ASP, you must have a program 
capable of running ASP scripts, such as ChililSoft ASP, installed on your Web server. You can 
download ChillSoft ASP at http://www.chilisoft.com. 

If that you want to use PHP, you must have the appropriate PHP server software for your 
operating system installed on your Web server. This may be downloaded from http://www.php.net. 

• If that you want to use JSP, you will need the appropriate JSP server software for your 
operating system installed on your Web server. 
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Setting Up a Database Connection 

Before using the Database Wizard, you need to set up a connection on your computer to 
your database so that the Database Wizard can access it. In addition, your Web server also 
needs to be able to connect to your database so that it can obtain data from it when 
visitors open your database-enabled document in a browser. 

The Database Wizard itself requires an ODBC connection to your database. However, 
your Web server may use an ODBC connection, a JDBC connection (for JSP documents), 
or a TCP/IP connection (for MySQL databases) to the database. 

Setting up an ODBC connection 

To set up an ODBC connection on your computer to your database, follow the steps 
below. If your Web server will also use an ODBC connection to the database, repeat the 
steps on the server. 

1. Click the Start button in the Windows task bar, point to Settings, and then click Control 
Panel. 

2. If your operating system is Windows 95, 98, NT, or ME, double-click ODBC Data Sources. If 
your operating system is Windows 2000, double-click Administrative Tools, and then 
double-click Data Sources (ODBC). 

3. Click the System DSN tab. 

4. Click Add, then select the appropriate driver for your database type. For example, if you have 
a Microsoft Access database, select Microsoft Access Driver. Then click Finish. 

5. In the next dialog box, in the box next to Data Source Name, type the name that you want to 
use for this data source. Select the database file, and then click OK. 

6. Your new data source should now appear in the list under System Data Sources. Click OK to 
exit the Data Sources control panel. 

Setting up a JDBC connection 

JDBC is a Java API (application programming interface) which allows you to run SQL 
on Java-based programs. Like ODBC, JDBC connects to the target database system, 
sends SQL queries, and passes the results to the application. For detailed information on 
JDBC, refer to Sun Microsystems' Web site at http://java.sun.com/products/jdbc/. 

Database vendors offer various JDBC interfaces, called JDBC drivers. One example is 
the Thin Driver offered by Oracle. You should consider the type of server-side script and 
database system when deciding which JDBC driver to use. To find a JDBC driver 
compatible with your database system, visit Sun Microsystems' JDBC driver search page 
at http://industry.java.sun.com/products/jdbc/drivers. If that you want to use a 
JDBC-ODBC bridge, you need to install the Sun Java Development Kit (JDK) on your 
computer. The Sun JDK is available at http://java.sun.com/j2se/. 
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Setting up a TCP/IP connection to a MySQL database 



If you intend to create PHP documents that connect to a MySQL database, your Web 
server can connect to the database directly, without going through ODBC, using a direct 
TCP/IP connection. To use a direct TCP/IP connection, select PHP in the first step of 
Database Wizard, specify the host and port number where the MySQL database is stored, 
and specify your user ID and password in the second step. 

The Database Wizard 

The Database Wizard lets you create database-driven dynamic Web pages without any 
knowledge of Web programming by automatically generating the necessary instructions 
(code) to tell the Web server how to obtain information from a database and present it in 
a Web document. 

There are seven basic steps in creating a database-enabled document with the Database 
Wizard: 

1 . Create a new document, or open an existing one. Decide how you want to present the 
database information in the document. The wizard can create:- a table that shows multiple 
records, one record per row, with each column a field;- a view that shows multiple records in 
a list, with each field on its own line;- a view that shows a single record;- a chart that shows 
values from multiple records in a visual form;- a form that lets your site visitors enter new 
records; or- a form that lets your site visitors modify existing records. 

2. Select the command in the Database submenu of the Insert menu corresponding to the kind 
of database view you want to have. This will launch the Database Wizard. 

3. Specify the dynamic document format (ASP, PHP, or JSP) and the database connection 
method to use. 

4. Select a data source (your database) and supply your username and password, if any, to 
access the database. 

5. Select the database fields to use in the document. 

6. Specify a few options specific to the particular database view that you selected. 

The Database Wizard does not create complete documents. Instead, it inserts a block into 
the current document open in the Edit window. A block is a region in a document that 
displays or lets visitors modify database records. Since the Database Wizard inserts a 
block into an existing document instead of generating a complete document, you retain 
full control over the formatting and the static (non-database-driven) content of the 
document. 
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The kinds of blocks that the Database Wizard can create are listed below: 



Block Type 


Description 


Input Block 


i\ iorm inai lets sue visiiors emer new records 
into the database. 


Modification Block 


/\ rorm inai lets sue visuors niooiry existing 
records in the database. 


Table Block 


A table that displays multiple records arranging 
in rows and columns, with field names in the 
header row. 


List Block 


A table that displays multiple records arranged in 
rows, with field names inside each row. 


Detail Block 


A table that displays a single record. 


Chart Block 


A chart that presents numerical database 
information in visual form. 



A single document can contain more than one block. However, some of the block types 
cannot coexist in the same document with other block type. Input, modification, table, 
and list blocks are all mutually exclusive, and only one of any kind can be in the same 
document. On the other hand, all block types can coexist with detail blocks and chart 
blocks, of which more than one can be in the same document. 

To use the Database Wizard, you select a block type from the Database submenu in the 
Insert menu. Each block type uses a slightly different variant of the Database Wizard, 
named after the block type. 
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Using the Database Wizard 



Connecting to a Microsoft Access database 

Before you use the Database Wizard, you must create a connection to your database using the 
Data Sources control panel. Follow the steps below to connect to a Microsoft Access 
database. 

1. Click the Start button in the Windows task bar, point to Settings, and then click Control Panel. 

2. If your operating system is Windows 95, 98, NT, or ME, double-click ODBC Data Sources. If your 
operating system is Windows 2000, double-click Administrative Tools, and then double-click Data 
Sources (ODBC). 

3. Click the System DSN tab. 

4. Click Add, select Microsoft Access Driver, and then click Finish. 

5. In the box next to Data Source Name, type the name that you want to use for this data source. 

6. Click Select..., navigate to your Microsoft Access database, select it, and then click OK. 

7. If that you want to protect this data source with a password, click Advanced..., enter a login name 
and password, and then click OK. 

8. Click OK twice to exit the Data Sources control panel. 

Now you're ready to use the data source you just defined. Your data source will appear in the 
Data source drop-down menu in step 2 of the Database Wizard. 

H If your Web server will use ODBC to connect to the database, you must also set up 
the data source on the server. 

Selecting a dynamic document type 

Document Type, the first step in the Database Wizard for all block types, involves selecting a 
dynamic document type (ASP, PHP, or JSP), specifying the database connection type, and 
specifying the operating system of the Web server that will serve the database-enabled 
document. 

Selecting a script type 

In the Script type menu, select the dynamic document format that you want to use. There are 
three choices: ASP, PHP, and JSP. 

ASP (Active Server Pages) is Microsoft's proprietary format for dynamically updated Web 
documents. Microsoft's Web server programsa€"Internet Information Server (IIS) and 
Personal Web Server (PWS)a€"have built-in support for ASP. On other platforms, ASP 
support is provided by third-party software such as Chili! Soft ASP. If your Web server runs 
IIS or PWS, ASP is probably the best choice for the document format. 

PHP (PHP Hypertext Preprocessor) is an open source format for dynamically updated Web 
documents. It is similar in function to ASP, but non-proprietary. PHP software for most server 
platforms may be freely downloaded from the PHP home page at http://www.php.net. 
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JSP (Java Server Pages) is very much like ASP except that the programming language is Java 
instead of VBScript or JavaScript. For more information about JSP, refer to 
http ava.sun.com/products/j sp. 

Specifying the database type 

In the Database menu, specify the type of database that the current document will connect to. 
This actually determines how the document will connect to the database. The database types 
available in the menu depend on which script type is selected: 

If the script type is ASP, the only available database type is ODBC. The document will use an 
ODBC connection to any database that supports ODBC. 

If the script type is PHP, the available database types are ODBC and MySQL. Choose ODBC if 
that you want the document to use ODBC to connect to a database that supports it. Choose 
MySQL if the document will connect to a MySQL database and that you want to use a TCP/IP 
connection. 

If the script type is JSP, the menu will list several database types in addition to ODBC. Select the 
type corresponding to your database. For example, if you are using an Oracle database, select 
Oracle. If your database type is not listed, select ODBC if that you want to use ODBC and the 
database supports it; otherwise, select User-defined. If you select User-defined, you will need to 
specify the driver to be used to connect to the database in the second step of the Database 
Wizard. 

Specifying the server OS 

In the Server OS menu, specify the operating system of the Web server that will serve the 
database-enabled document. This setting is only important if you are creating a chart block, in 
which case the setting is used to determine the appropriate CGI program that will be used to 
dynamically generate the chart. If the current document will not contain a chart block, this 
setting is ignored. 
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Specifying a data source 

In Data Source, the second step of the Database Wizard for all block types, you specify a data 
source (database) from which to obtain the dynamic content of the block. If necessary, you 
can also enter a user ID and password to access the data source. The content of this dialog box 
depends on which database type you have selected in the first step of the Database Wizard. 

Creating a data source in the Database Wizard 

Alternatively, you can create a connection to your database within the Database Wizard, 
without using the Data Source control panel. 

1. In step 2 of the Database Wizard, in the Data source drop-down menu, select <Make New DSN>. 

2. Select System Data Source and click Next. 

3. Select Microsoft Access Driver, click Next, and then click Finish. 

4. Follow steps 5-7 above. 

5. Proceed to the next step of the Database Wizard. 

Selecting database fields 

Database Fields, the third step of the Database Wizard for all block types, involves selecting the 
fields in your database that will be displayed in the block. 

The hierarchical list on the left side of the dialog box lists all the tables in the data source you 
specified in the previous step of the Database Wizard. Clicking the small plus sign next to a 
table name reveals the fields in that table. 

The list on the right side shows the names of the fields that will be used in the block, along 
with each field's data type and other information. To add a field to this list, select it in the list 
on the left and click Add. To add all the fields in a table at once, select the table and click Add. 
To remove a field from the list on the right, select it and click Remove. To remove all the 
fields in the list on the right and start over, click Delete. 

Depending on the block type, you may be able to select fields from more than one table for 
inclusion in the block. If you are creating an input or modification block, only fields from one 
table may be included. However, for any other block type (the output types), you may add 
fields from multiple tables. If you do, you will need to enter a join statement in the Selection 
Statement step of the wizard, in order to specify how the tables are to be related. 

For displaying records from simple databases, you often only need to choose fields from one 
table. (Indeed, your database may only have one table.) However, for displaying records from 
more complex databases, selecting fields from multiple tables can be essential. 
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Selecting fields from a single table 

Say we have a one-table database that contains a list of customer orders. The record structure 
is as follows: 



Field Name 


Data Type 


ID 


number 


Date 


date 


Customer 


string 


Product 


string 


Quantity 


number 



In order to create a table block to display all the information in this database, we only need 
select all the fields in the single database table. Since there are no other tables in the database, 
there's no need to select fields from other tables. 

The first three records displayed in our table block might look something like this: 



ID 


Date 


Customer 


Product 


Quantity 


1 


8/5/00 


John Doe 


Namo WebEditor 4 


5 


2 


8/12/00 


Jane Deer 


DeepSearch 3.0 


1 


3 


8/27/00 


Bill Blast 


Namo WebEditor 5.5 


10 



Selecting fields from multiple tables 

Now, let's consider a more complicated case involving multiple tables. Say our database has 
two tables: one, named Orders, contains a list of orders. The other table, named Customers, 
stores information on each of our customers. The Orders table has the following record 
structure: 



Field Name 


Date Type 


Orders.ID 


number 


Orders. Date 


date 


Orders. Customer 


number 


Orders. Product 


string 


Orders. Quantity 


number 
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And the Customers table has this structure: 



Field Name 


Date Type 


Customer.ID 


number 


Customers. Name 


string 


Customers. Street 


string 


Customers. City 


string 


[...and so on] 


[...] 



Whereas in the single-table database, customers were identified by name, in the two-table 
database, customers are identified by ID number. The ID numbers in Orders. Customer 
correlate with the ID numbers in Customers. ID. 

What would happen if, when choosing fields for our database-enabled document, we selected 
only the fields in the Orders table and didn't select any fields from the Customers table? The 
first three records of our table block would look like this: 



ID 


Date 


Customer 


Product 


Quantity 


1 


8/5/00 


106 


Namo WebEditor 4 


5 


2 


8/12/00 


33 


DeepSearch 3.0 


1 


3 


8/27/00 


418 


Namo WebEditor 5.5 


10 



Obviously, having ID numbers appear in the Customer column is not very useful. We would 
like to have customer names appear in the Customer column. To make this happen, we need to 
select two fields from the Customers table; Customers. ID and Customers.Name in addition to 
the fields in the Orders table. By doing so, our document can match up the numbers in Orders. 
Customer to the numbers in Customers. ID, and thus find the right customer names to display. 
This matching up of tables is done using a join statement entered in the Selection Statement 
step of the Database Wizard. 

Entering a selection statement 

Selection Statement is the fourth step of the Database Wizard for all block types except input 
blocks, to which it does not apply. In this step, you enter a join statement if you selected fields 
from more than one table in the Database Fields step, and optionally enter where and order 
statements to specify which database records to display and the order in which to display 
them. 
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Entering a "join" statement 



A join statement tells the document how fields from multiple tables are related to each other. 
A join statement is not necessary (nor is it possible) if the block includes fields from only one 
table. On the other hand, if the block includes fields from more than one table, a join 
statement is mandatory. 

How you formulate the join statement depends on what information that you want to display 
in the block and which fields from different tables are related. The basic form of a join 
statement is as follows: 

tablel . f ieldl = table2 . f ield2 

The basic idea is to state that a field in one table is related to a field in another table by putting 
an "=" sign between the two field names. If there are two or more such equations to make, you 
put the word "AND" between the equations. 

To illustrate, let's continue the example given in the previous subsection. We wanted to set up 
a table block to show the records in our Orders database, which identifies customers by ID 
number. But we want customers' names, not ID numbers, to appear in the Customers column 
of the table block, so we added the fields Customers. ID and Customers.Name to the block, 
knowing that we could display customers' names by matching their ID numbers in 
Orders. Customer with their ID numbers in Customers. ID. 

Here, then, is the join statement we need to use: 

Orders . Customer = Customers . ID 

This tells the Database Wizard that we will pull records from the Customers table where the 
number in Customers. ID is the same as the number in Orders. Customer. If we were to leave 
out the join statement (if we could), the document would not know which records from the 
Customers table to display in the table block. 

The □ button next to the Join text box provides shortcuts for entering field names and 
logical operators. Instead of typing field names by hand, you can click the button and select a 
field from among the fields included in the block. 

A join statement is not applicable to input or modification blocks, since these block types can 
only include fields from a single table. 

Entering a "where" statement 

A where statement is a conditional statement used to specify which record or records in a 
table are to be displayed in the block. This statement is optional for table, list, and chart 
blocks, but it is mandatory for detail and modification blocks, in which a single record must 
be selected. A where statement is not applicable to input blocks. 
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The basic form of a where statement is: 



tablel . f ieldl comparison_operator value | table2 . f ield2 

(The "|" between the last two terms indicates that either term, but not both, may be used.) 

Some comparison operators are "=" (equals), "<>" (does not equal), "<" (is less than), ">" (is 
greater than), ">=" (is greater than or equal to), and "BETWEEN. . .AND". If that you want to 
make two or more comparisons, put "AND" between them if both conditions should be true, 
or "OR" if one or the other should be true. 

Some examples of where statements are: 

Orders. Quantity > 10 

Orders. Quantity BETWEEN 10 AND 20 

Orders .Quantity > 10 AND Customers .Name = 'Trisha Long' 
Customers. ID = <a, customer_ID> 

The last example compares the value in a field with the value of an argument passed to the 
document by a hyperlink (the "a" stands for "argument"). This type of where statement is used 
for a detail or modification block, in which you select the record to be displayed by clicking a 
hyperlinked output field in another document. 

You can also make a statement using wildcard character "%".For example, if you want to find 
people, whose names begin with "Namo", from the 'employee' table, you can use the 
following statement. 

SELECT *FROM employeeWHERE name LIKE *Namo%' 

The □ button next to the Where text box provides shortcuts for entering field names and 
logical operators. Instead of typing field names by hand, you can click the button and select a 
field from among the fields included in the block. 

Entering an "order" statement 

An order statement is used to specify the sort order of the records displayed in a table or list 
block. Simply enter the name of a field in order to sort by that field. If that you want to sort 
the records using multiple sort keys, enter multiple field names separated by commas. 

Two examples of order statements are: 

Orders . Date 

Orders . Date , Customers . Name 

The first example sorts records by one field, Orders.Date. The second example sorts records 
by two fields — first by Orders.Date, and then by Customers. Name. Default order is 
descending. If you want to sort data in a descending order, select a field in Order text box and 
enter 'desc'. 
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The □ button next to the Order text box provides shortcuts for entering field names. Instead 
of typing field names by hand, you can click the button and select a field from among the 
fields included in the block. 

Adding and removing block elements 

Block Elements is the fourth step of the Database Wizard for input blocks, and the fifth step for 
table, list, detail, and modification blocks. This step does not apply to chart blocks. In this step, 
you select the elements that will compose the block. Block elements are the "bricks" 
database-enabled documents are made of. Each block element provides one part of the active 
(i.e., dynamically generated) content of the document when it is viewed in a browser. For 
instance, if a table block has an output field element, values in the database field 
corresponding to the output field will appear in the block when viewed in a browser. Thus, the 
combination of block elements in a block determines what kind of active content - which 
database fields - will appear in the database-enabled document. 



Types of block elements 

There are five basic types of elements that a block can have: 



Output fields 


An output field displays the value in a particular database field 
for each record displayed in the block. 


Input fields 


An input field allows a site visitor to enter a value for a 
particular database field for one record. 


Input controls 


An input control is like an input field, but lets site visitors 
select an item from a group of predefined items, using the 
mouse. 


Hidden fields 


A hidden field is used to insert a value into a database record 
without allowing the site visitor to change it. 


Page link sets 


A page link set allows site visitors to view additional records in 
a table or list block by moving to another page of records. 



Not every element type can exist in every block type. Output fields are appropriate for table, 
list, detail, and (sometimes) modification blocks. Input fields and input controls can only exist 
in input and modification blocks. Hidden fields are only useful in modification blocks. Page 
links can only exist in table and list blocks. 
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Except for page link sets, each element type has 
table below, along with the block types they can 



two or more subtypes. These are listed in the 
exist in. 



Element type 


Element properties 


Input fields 


Number input field 


DB field name, default value, 
width max innut IpnPth 




String input field 


DB field name, default value, 
width, max input length 




Text input field 


DB field name, default value, 
width number of lines 




Date input field 


DB field name, default value, 
date format 


Hidden field 


DB field name, default value 


Page link sets 


Table, list 


Input controls 


Drop-down menu 


DB field name, menu items 
source field, item values source 
field, default value 




Radio button group 


DB field name, button labels 
source field, button values 
source field, default value 


Output fields 


Output field 


DB field name 




Output field (hyperlink) 


DB field name, target URL, 
send parameters 



/j^ In addition to the element types already mentioned, there is one other type of block 
element, which can only exist in chart blocks: a chart element. 
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Editing the element list 

Initially, the list of elements in the block you are creating contains one input or output field 
for each database field you selected in the Database Fields step of the wizard. Additionally, if 
the block is a table or list block, the element list includes a page link set so that site visitors 
can see additional pages of records. 

In many cases, there is no need to edit the element list. There are, however, some situations in 
which you should remove or add elements, particularly if you included database fields from 
more than one table in the database. 

You may also at times wish to add elements to the block. For example, you could replace an 
input field with a drop-down menu or a radio button group, so that your site visitors are 
limited to selecting only certain predefined items to input into a database field. If you have, 
say, an input block that serves as an order form, you might replace a products input field with 
a products drop-down menu, so that your site visitors cannot input a nonexistent product. 

To add an element to the block, do this: 

1 . Click the Add button. A drop-down menu listing the applicable element types will appear. 

2. Select an element type from the menu, and the properties dialog box for the selected element type 
will appear. 

3. Fill out the properties dialog box and click OK. 

You can also add elements to a block in the Edit window, after completing the Database 
Wizard. 

Appearance of blocks in the Edit window 

When you complete the Database Wizard, the new block is inserted into the active document in 
the Edit window at the location of the cursor. The picture below shows how a table block for a 
list of customer orders might appear in the Edit window, before any formatting: 



Orders. ID 


Orders. Date 


Customers. Mame 


Products. Name 


Orders. Quanity 


write value 


write value 


write value 


write value 


write value 


[«] [ 1 2 3 4 £ 6 7 8 9 ID ] [»] 



The top row of the table contains database field names, which are static labels. The second 
row contains most of the active elements of the block: each cell contains an output field. The 
words "write value" serve as a placeholder for each output field. 

Finally, the bottom row of the table contains the page link set, used to view additional pages 
of records. 
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The picture below shows a simple input block for inputting new customer orders, as it appears 
in the Edit window before any formatting. 



Orders, Date 



;ll2jJ/|25.rJ/h990_d 111 J :|59_d 



Orders, Customer 



Orders, Product 



Orders, Quantity 



12345 



Submit query 



In an input block, field names appear on the left side of a two-column table, and input fields 
and controls are on the right. There is one row per block element. In the particular input block 
above, the elements are a date input field, followed by two drop-down menus, and a number 
input field. Finally, at the bottom are a submit button (used by site visitors to submit the order) 
and a reset button (used to clear the order form). 

Q The "write value", "write link" area will be highlighted in yellow, as in the example 
below. 



dept.id 



dept.name 



Submit quety Reset [l^-l 



Modifying the appearance of a block 

Blocks may be rearranged and formatted, just like static page elements. 

• If you are not satisfied with the layout of the elements in a block, you can move the 
elements using drag-and-drop or copy-and-paste. (However, you must not move any 
element to a location outside the block.) 

• Output fields and hyperlinked output fields may be formatted in the same way as static 
text. You can change their font, text size, colors, and so forth. CSS-type styles may also 
be applied. 

• You can resize, merge, or split the cells of the table used to arrange the block elements. 
You can also resize the table itself, as well as change its borders, background color, and 
other appearance attributes. 

• The element labels the Database Wizard generates may be edited and formatted freely, 
or even deleted, since they are merely static text. You can also add more static text, or 
images, inside or outside the block. 

• You can modify the labels on the buttons in input and modification blocks. To change a 
button label, double-click the button and enter the new label in the Value text box. 
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Creating Blocks 



Creating an input block 

An input block is used to allow your site visitors to enter new records into a database. 

To create an input block, do this: 

1 . Create a new document or open an existing document. 

2. Select the [Insert > Database > Input Block...] command. This will start the Database Wizard. 

3. Select a dynamic document format and click Next. 

4. Select a data source and click Next. 

5. Select database fields from one or more tables and click Next. 

6. Confirm that the block element list is correct. If that you want to replace one or more of the input 
fields with input controls, you can do so now by clicking Add and selecting Drop-Down Menu or 
Radio Button Group in the drop-down menu. However, it may be easier to add the input controls 
after finishing the wizard. Click Next. 

7. Select an input method: GET or POST. This is the method used to send the information entered in 
the input block by a site visitor to the Web server. POST is the recommended method when the 
submitted information will be saved by the server, such as in a database. Since this is the case, 
select POST unless you have a specific reason to choose GET. 

8. Optionally, enter a URL or relative path under Result URL. When the site visitor clicks the submit 
button to submit the information in the block, the specified document will be opened by the 
browser. If no result URL is specified, the generic message "Input process complete." will be 
displayed. 

9. Click Finish. 

After completing the Database Wizard, you can replace one or more of the input fields with 
drop-down menus or radio button groups. 

Creating a modification block 

A modification block is used to allow site visitors to edit existing records in a database. It is 
similar to an input block, except that instead of presenting a blank form to the visitor, the form 
is already filled out with the information in an existing record. 

To create a modification block, do this: 

1 . Create a new document or open an existing document. 

2. Select the [Insert > Database > Modification Block...] command. This will start the Database 
Wizard. 

3. Select a dynamic document format and click Next. 

4. Select a data source and click Next. 

5. Select database fields from one or more tables and click Next. 



Database-Enabled Documents | 279 



6. In the Selection Statement step, enter a where statement to specify which record to display in the 
block, and then click Next. (See below for more information.) 

7. Confirm that the block element list is correct. If that you want to replace one or more of the input 
fields with input controls, you can do so now by clicking Add and selecting Drop-Down Menu or 
Radio Button Group in the drop-down menu. However, it may be easier to add the input controls 
after finishing the wizard. Click Next. 

8. Select an input method: GET or POST. This is the method used to send the information entered in 
the input block by a site visitor to the Web server. POST is the recommended method when the 
submitted information will be saved by the server, such as in a database. Since this is the case, 
select POST unless you have a specific reason to choose GET. 

9. Optionally, enter a URL or relative path under Result URL. When the site visitor clicks the submit 
button to submit the information in the block, the specified document will be opened by the 
browser. If no result URL is specified, the generic message "Input process complete" will be 
displayed. 

10. Click Finish. 

As with a detail block, you must enter a where statement that selects exactly one record. If 
you do not enter a where statement, the modification block will simply display the first record 
in the database table, and when the site visitor clicks the submit button, the information in all 
of the records will be replaced by the submitted information. If you enter a where statement 
that does not select a unique record, the block will display the first matching record, and the 
information in all matching records will be replaced by the submitted information. 

Creating a table block 

Table and list blocks are both used to display multiple records. A table block displays records 
in rows and columns, like a spreadsheet; while a list block displays records sequentially, with 
each output field in its own row. 

To create a table block, do this: 

1 . Create a new document or open an existing document. 

2. Select the [Insert > Database > Table Block] command. This will start the Database Wizard. 

3. Select a dynamic document format and click Next. 

4. Select a data source and click Next. 

5. Select database fields from one or more tables and click Next. 

6. Enter optional selection statements — such as a join statement if you included database fields from 
more than one table in the previous step — and then click Next. 

7. If necessary, edit the block element list and then click Next. 

8. In the List Settings step, specify the number of records to display per page, and then click 
Finish. 
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Creating a list block 

Table and list blocks are both used to display multiple records. A table block displays records 
in rows and columns, like a spreadsheet; while a list block displays records sequentially, with 
each output field in its own row. 

To create a list block, do this: 

1 . Create a new document or open an existing document. 

2. Select the [Insert > Database >List Block] command. This will start the Database Wizard. 

3. Select a dynamic document format and click Next. 

4. Select a data source and click Next. 

5. Select database fields from one or more tables and click Next. 

6. Enter optional selection statements — such as a join statement if you included database fields from 
more than one table in the previous step — and then click Next. 

7. If necessary, edit the block element list and then click Next. 

8. In the List Settings step, specify the number of records to display per page, and then click Finish. 

Once you complete the Database Wizard, the table or list block will appear at the cursor in the 
current document. Format the block and add static content as desired. 



Database-Enabled Documents | 281 



Creating a detail block 

A detail block is used to display a single record, selected by ID number or some other 
criterion. 

To create a detail block, do this: 

1 . Create a new document or open an existing document. 

2. Select the [Insert > Database > Detail Block] command. This will start the Database Wizard. 

3. Select a dynamic document format and click Next. 

4. Select a data source and click Next. 

5. Select database fields from one or more tables and click Next. 

6. In the Selection Statement step, enter a where statement to specify which record to display in the 
block, and then click Next. (See below for more information.) 

7. If necessary, edit the block element list as described in Adding and removing block elements, and 
then click Finish. 

Unlike most other block types, for a detail block you must enter a where statement that selects 
exactly one record. If you do not enter a where statement, the detail block will simply display 
the first record in the database table. If you enter a where statement that does not select a 
unique record, the block will display the first matching record. 

One way to uniquely specify a record to display is to specify the value in a field that is 
constrained to have unique values, such as an ID field. For instance, you could enter a where 
statement such as Customers. ID = 7 in order to select one customer record by ID number. 

If you link to a detail block using a hyperlinked output field, the where statement must be in 
the following form: 

table. field = <a, argument_name> 

This statement compares the values in the specified field with the value of an argument passed 
to the detail block by the hyperlink. 

Creating a chart block 

A chart block takes numerical values from one or more database tables and depicts them in 
chart or graph form. 

Database table format requirements 

There are certain restrictions in the way a table can be formatted, if it will serve as a data 
source for a chart block: 

1. The chart block can only use one numerical value per record. If a table has more than one number 
field, only one will be used by the chart block. 

2. If that you want the chart block to obtain labels from the table, the table must provide both series 
and category labels. If the table provides only one or the other, the chart block cannot use the 
labels, and you must enter them manually. 
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Below is an examples of tables formatted appropriately for use with a chart block. 
Example 



RecordJD 


Country 


Product 


UnitSales 


1 


United States 


Widgets 


796 


2 


United States 


Gewgaws 


520 


3 


Sweden 


Widgets 


359 


4 


Sweden 


Gewgaws 


425 


5 


Japan 


Widgets 


311 


6 


Japan 


Gewgaws 


701 



This table is ideal for use with a chart block. There is only one number field, and there are two 
string fields, one of which will be used as the source of series labels and the other, category 
labels. The chart produced from this table can have either two series and three categories, or 
three series and two categories, depending on whether the countries are series and the 
products are categories, or the reverse is true. 
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Steps to create a chart block 

1 . Create a new document or open an existing document. 

2. Select the [Insert > Database > Chart Block...] command. This will start the Database Wizard. 

3. Select a dynamic document format and click Next. 

4. Select a data source and click Next. 

5. Select database fields from one or more tables and click Next. 

6. Enter optional selection statements— such as a join statement if you included database fields from 
more than one table in the previous step — and then click Next. 

7. In the Chart Settings step, select the database field from which to obtain the numerical values, 
using the Values drop-down menu under Source fields. Only number fields appear in the menu. 

8. Select the database fields from which to obtain Series names and Category names, or select 
Enter manually to enter the names manually later. Then, click Next. 

9. Select a chart type and subtype, and then click Next. (This step is identical to the first step of the 
Chart Wizard.) 

10. Optionally, enter a title for the chart and its X and Y axes, and then click Finish. (This step is 
identical to the last step of the Chart Wizard.) 

The chart block will be inserted into the current document. To modify its appearance, 
double-click it and use the Chart Type, Title, Series, Trendlines, Axis, and Chart Formatting tabs 
in the Chart Block Properties dialog box. 

Obtaining series and category labels from the database 

To obtain series and category labels for the chart block from the database, do this: 

1. In the Chart Settings step of the Database Wizard, select Retrieve from database under 
Source. 

2. In the Series name drop-down menu under Source fields, select the database field that will 
provide the series labels. 

3. In the Category names drop-down menu, select the database field that will provide the category 
labels. After completing the Database Wizard, if you decide to use different fields for the series 
and/or category label sources, you can change the selections in the Chart Block Settings tab of 
the Chart Block Properties dialog box. To open the dialog box, double-click the chart block. 

Entering series and category labels manually 

To enter series and category labels manually, do this: 

1. In the Chart Settings step of the Database Wizard, under Source, select Enter manually. 

2. Enter the Number of categories and the Number of series that you want the chart to have. 

3. Complete the Chart Wizard. 

4. In the Edit window, double-click the chart block to open the Chart Block Properties dialog box, 
and then click the Series tab. 

5. Select a series in the list box on the left side of the dialog box, and then enter a label for the series 
under Series name. Repeat for each series. 
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6. Click the Values tab. 

7. In the spreadsheet-like table at the top of the dialog box, enter a category label in each of the 
green cells under the Category heading. To enter a label, double-click the cell, type the label, and 
then press <Enter>. 

8. Click OK. 

To confirm that the labels were entered correctly, switch to the Preview window. 
Publishing a document with a chart block 

A chart block is different from other kinds of blocks that the Database Wizard creates in that it 
requires a piece of software, in addition to the Web server software, to generate its contents. 
This additional software is in the form of a CGI program that the Database Wizard places, by 
default, in the same folder in which you save the chart block document. When you publish a 
document containing a chart block, you must publish the CGI program along with the 
document. If you do not, your site visitors will not be able to see the chart. Keeping the CGI 
program in the same folder as the document facilitates publishing, since in most cases you 
would publish the entire contents of the document folder anyway. 

However, you may need to store the CGI program in a folder on your Web site other than the 
folder containing the chart block document. This could be the case if the public access rights 
on the document folder do not include "execute" permission, in which case CGI programs in 
the document folder cannot be executed. 

If you need to store the CGI program in a different folder, such as a cgi-bin folder in your 
home directory, you must specify the path to the CGI program in the chart block's properties. 
To do this, you first need to know the filename of the CGI program. Refer to the table below 
to determine the correct filename. 



If your Web server's operating system is: 


the CGI program's filename is: 


Windows 


wed_chart_window.cgi 


Linux 


wed_chart_linux.cgi 


Solaris 


wed_chart_solaris.cgi 


Solaris x86 


wed_chart_solaris_x86.cgi 


FreeBSD 


wed_chart_freebsd.cgi 



Once you know the CGI program's filename, you can construct the appropriate path to specify 
in the chart block's properties. To construct the path, simply append the CGI program's 
filename to the path of your CGI folder. For instance, if your CGI folder is in your home 
directory, the CGI folder is named cgi-bin, your server runs Windows, and you will store the 
chart block document in your home directory, then the correct path is 
cgi-bin/wed_chart_windows.cgi. 
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To specify the path in the chart block's properties, do this: 

1. Double-click the chart block to open the Chart Block Properties dialog box, and then click the 
Chart Block Settings tab. 

2. Under CGI path, enter the path to the CGI program. 

3. Click OK. 

Once you change the path specification, you will not be able to preview the chart unless you 
copy the CGI program to the same location on your hard drive, relative to the document, as 
the location specified in the path. For instance, if your CGI program path is 
cgi-bin/wed_chart_windows.cgi, you should create a cgi-bin folder in the document folder 
and copy wed_chart_windows.cgi to it. The CGI programs may be found in Namo WebEditor 
5.5's program folder, under lib/DB Wizard. If you installed Namo WebEditor in the default 
installation folder, the folder path is: 

C:\Program Files\Namo\WebEditor 5\lib\DBWizard\ 

When publishing the chart block document, make sure to publish the CGI program to the 
correct folder on your Web site, as well. 
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Adding Block Elements 



Adding an input field 

An input field is a block element that allows site visitors to enter a value for a particular 
database field in a particular record. Input fields, along with input controls, are the main 
elements of input and modification blocks. Input fields cannot be added to any other kind of 
block. 

There are four types of input fields, corresponding to four data types: number, string, text, and 
date. In a database, each field has an assigned data type, so you must use the right kind of 
input field for it. 

1 . Place the cursor at the location inside an input or modification block where that you want the field 
to be inserted. (The cursor must be inside the block.) 

2. Select any of the input field commands in the [Insert > Database] submenu, such as [Insert > 
Database > Number Input Field...]. The Input Field Properties dialog box corresponding to the 
selected input field type will appear. 

3. Click the Input Field Settings tab. 

4. In the Target field drop-down menu, select the database field that will accept the value entered 
into the input field. Only database fields of the same data type as the input field will appear in the 
menu. 

5. If you are adding the input field to a modification block, click the [^Tj button next to the Default 
value text box and select the same database field you selected for the target field. (In the 
drop-down menu, database field names appear inside angle brackets, preceded by "f,". For 
example, <f,Customers.Name>.) 

6. If you are adding the input field to an input block, you can optionally specify a default value for the 
field. In the Default value text box, enter either a static value or the name of a parameter that will 
supply the default value. Click the |T7] button to select a parameter from among the parameters 
that have been defined in Parameters tab of the Document Header Properties dialog box. 

7. If you are adding a number or string input field, specify the Width in characters and the Maximum 
input length (also in characters). 

8. If you are adding a text input field, specify the Width in characters and the height of the field in 
Number of lines. 

9. If you are adding a date input field, specify the Date format. Use "yy" to represent the year, "mm" 
for the month, "dd" for the day, "hh" for the hour, "mi" for the minute, and "ss" for the second. You 
may use any character as separators. You can use the drop-down menu to select from several 
preset formats. 

10. Click OK. 

Q To enter values into a Boolean ("true/false" or "yes/no") database field, use a number 
input field. 1 = true; 0 = false. 
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Adding a hidden field 

A hidden field is used in an input or modification block to insert a value into a database record 
without allowing the site visitor to change it. For instance, you could replace an input field 
with a hidden field for the ID field of a database, so that site visitors will not be able to 
modify the ID number. 

1 . Place the cursor at the location inside the input or modification block where that you want the field 
to be inserted. (The cursor must be inside the block.) 

2. Select the [Insert > Database > Hidden Field...] command. The Hidden Field Properties dialog 
box will appear. 

3. In the Target field drop-down menu, select the database field that will accept the value of the 
hidden field. 

\ \\m\MmiJ!>mmmmtmi^^^^^^^^^^^^^^ ?i x i| 

Source Information Hidden Field Sellings | 



Target field: | ESSIE 3 




Description 

Specify the settings for the hidden field. A hidden field is used to send a field name and value without 
revealing them to the site visitor. 



4. In the Default value text box, enter a value for the hidden field. If the hidden field is in a 
modification block, the value can be supplied from a database field among the fields you selected 
in the Database Fields step of the Database Wizard. The value contained in that field for the 
selected record wil l be used as the value of the hidden field when the document is displayed in a 
browser. Click the I ... | button to select a database field. 

5. Click OK. 

By default, a hidden field is not actually invisible. The value in a hidden field is visible in a 
browser. To make the hidden field effectively invisible, select the small yellow mark 
representing the hidden field in the Edit window, and use the Font Color menu in the 
Formatting Toolbar to apply the color of the document's background to the hidden field. 

Adding a drop-down menu or radio button group 

Drop-down menus and radio button groups - collectively called input controls - are block 
elements that allow a site visitor to select one item from a list. The items in the list are 
provided by one database field (and their associated values potentially provided by another). 
Selecting an item from an input control has the same result as typing the value in an input 



288 | Chapter 18 



field, but input controls offer the advantage of limiting what can be entered so that site visitors 
cannot input invalid values by mistake. 

When you use a drop-down menu or a radio button group, the value that is inputted using it 
may be different from the item selected by the site visitor. For instance, in the radio button 
group pictured below, when the site visitor selects the "Visa" item, the word "Visa" is not 
necessarily the value that will be entered into the database. Although the value that is sent to 
the database could be the same as the item (the word "Visa"), it might be something else, such 
as the number 3. 





0 American Express 


Credit Card Type 


C MasterCard 




© Visa 



Whether the values are the same as the items is your choice. If the database field into which 
the selected value will be entered is a number field, the values must be numbers; however, 
you'll probably wish to obtain the input control's items from a different database field, which 
contains words instead of numbers. Therefore, when you add a drop-down menu or a radio 
button group, you must specify not only the database field that will provide the input control's 
items, but also the field that will provide the associated values - even if the items and their 
values are identical. 

To add a drop-down menu or a radio button group, do this: 

1 . Place the cursor at the location inside an input or modification block where that you want the field 
to be inserted. (The cursor must be inside the block.) 

2. Select the [Insert > Database > Drop-Down Menu...] command or the [Insert > Database > Radio 
Button Group...] command. This will start a variation of the Database Wizard for the selected 
input control. 

3. In the second step of the Database Wizard, select an ODBC data source, enter a user ID and 
password if necessary, and then click Next. 

4. In the Database Fields step, in the hierarchical list on the left, select the source database field for 
the items in the input control. If the items and their associated values will be different, also select 
the source field for the values, and then click Add. Then, click Next. 

5. Optionally enter a where statement to specify which records to use (leave blank to use all records) 
and/or an order statement to specify how to sort the records. Then, click Next. 

6. In the Target field drop-down menu, select the database field that will receive the value selected 
by the input control. 

7. In the Menu items source field or Button labels source field drop-down menu — depending on 
which type of input control you are adding — select the source database field for the items in the 
input control. 

8. In the Item values source field or Button values source field drop-down menu, select the source 
database field for the values associated with the items in the input control. 
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9. If you are adding the input control to a modification block, click the | ... | button next to the Default 
value text box and select the database field that will supply the default value for the input control. 
(This is usually the same as the target field.) 

10. If you are adding the input control to an input block, you can optionally specify a default value for 
the control. In the Default value text box, e nter either a static value or the name of a parameter 
that will supply the default value. Click the | ... | button to select a parameter from among the 
parameters that have been defined in Parameters tab of the Document Header Properties dialog 
box. 

11. Click Finish. 

Adding an output field 

An output field is a block element that displays the value in a database field. Output fields 
(and optionally, hyperlinked output fields) are the basic constituents of table, list, and detail 
blocks. You can also add an output field to a modification block, if that you want to show the 
value in a particular field without letting site visitors modify it. 

1 . Place the cursor at the location inside a block where that you want the field to be inserted. (The 
cursor must be inside the block.) 

2. Select the [Insert > Database > Output field] menu command. The Output Field Settings dialog 
box will appear. 

3. Click the | ... | button next to the Database field text box and select the database field whose 
contents that you want to display in the output field, and then click OK. 

If the database field that you want to use does not appear in the Database field drop-down 
menu, you must add it to the list of included database fields in the block properties. To add a 
database field, do this: 

1. Right-click anywhere inside the block and select Block Properties. The Block Properties dialog 
box corresponding to the current block will appear. 

2. Click the Database fields tab. 

3. Select the desired database field in the hierarchical list on the left side of the dialog box and click 
Add. The selected field will appear in the list of included fields on the right. 

4. Click OK. 

Use the [Insert > Database > Output field] command again and select the newly-added database 
field in the drop-down menu. 

Adding a hyperlinked output field 

A hyperlinked output field, like an ordinary output field, displays the value in a database field. 
However, it also acts as a hyperlink to another document, such as one containing a detail or 
modification block. By clicking the hyperlinked output field, a site visitor can view or modify 
the record corresponding to the item in the output field. 

When you use a hyperlinked output field to link to a detail or modification document, the 
hyperlink passes to the document an argument that contains a unique identifier of the record 
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to be displayed in the detail or modification block. The detail or modification block must 
therefore contain a declaration of the argument, so that the block "knows" what to do with the 
argument. 

To set up a hyperlinked output field that links to a document containing a detail or 
modification block, do this: 

1. In the document that the hyperlinked output field will link to, right-click anywhere inside the detail 
or modification block and select {Database > Document Properties...} in the shortcut menu. The 
Document Header Properties dialog box will appear. Click the Parameters tab. 

2. Click Add. A new argument with the temporary name "<New Arg>" will be added. 

3. Type a name for the new argument and press <Enter>. You can name it anything you like, as long 
as the name contains no spaces or punctuation other than underscores. Then, click OK. 

4. Save the document, and then switch to the document in which that you want to add the 
hyperlinked output field. 

5. Place the cursor at the location in the block where that you want to add the hyperlinked output 
field. 

6. Select the [Insert > Database > Output Field (Hyperlink)...] command. The Output Field 
(Hyperlink) dialog box will appear. 

7. Click the | ... | button next to the Database field text box and select the database field whose 
contents that you want to display in the hyperlinked output field. You can also enter a static string, 
such as "Previous" of "Next" if that you want. When you enter a static string, it has to be inserted 
with a double quotation marks (" "). If that you want to insert an image, type in the image tag with a 
double-quotation marks. However, when you insert an image tag in the Database field text box, no 
quotation marks should be inserted inside the <img> tags. 



8. In the URL text box, enter the URL or relative path to the document that you want the hyperlinked 
output field to link to. 

9. In the Name text box under under Parameters, type the name of the argument you added in the 
other document. 

10. Click the I ... | button next to the Value text box and select the database field whose value will be 
passed to the other document. 

1 1 . Click OK to close the Output Field (Hyperlink) dialog box. 




S ource Information Oulput Field [Hyperlink) Settings 
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Setting up a hyperlink to a detail block 

The most practical way to use a detail block is to let it display the record corresponding to a 
unique value in a field included in a table block or a list block. This is done by passing an 
argument to the detail block by means of a hyperlinked output field in the other block. To 
illustrate, let's consider the following example. Say we have a table block that displays 
customer orders, as in the example below: 



llorder ID 


Order Date 


Customer ID 


Product Name 


Quantity! 


6 


7/1/01 4:15 


00 P.M 


1 


Namo WebEditor 5 English 


10 


7 


7/1/01 6:23 


00 P.M 


2 


Namo DeepSearch 4.0 Enterprise 


1 


13 


7/4/01 4:01 


00 P.M 


3 


Namo WebEditor 4 German 


5 


14 


7/4/01 4:25 


00 P.M 


7 


Namo WebEditor 5 Korean 


2 


15 


7/4/01 4:27 


00 P.M 


4 


Namo WebEditor 5 French 


69 


[12 3] [ >> ] 



In this table block, customers are identified by their ID number. We would like to create a 
hyperlink on each customer ID that links to another document showing the customer's 
information record. The other document would contain a detail block, and it might look like 
the example pictured at the beginning of this section. 

To do this, we need to replace the Customer ID output field in our table block with a 
hyperlinked output field linking to the detail document. The hyperlink will contain an 
argument, or parameter, that contains the ID number of the customer whose ID the site visitor 
clicks. We also need to declare the argument in the detail block, so that it "knows" what to do 
with the argument when it receives it. Finally, we need to set up the where statement for the 
detail block to compare the value in the argument to the values in the Customers. ID database 
field that the detail block includes. 

These are the steps we need to take: 

1 . Delete the output field for customer IDs in the table block. 

2. Without moving the cursor, select the [Insert > Database > Output Field (Hyperlink)] command. 
The Output Field (Hyperlink) Properties dialog box appears. 

3. Click the | ... | button next to the Database field text box and select <f,Orders.Customer>. (This is 
the name of our database field for customer IDs. The "f indicates that what follows is a field 
name.) Doing this specifies that the hyperlinked output field should display the values in the 
Orders. Customer database field — that is, customer IDs— just as the ordinary output field that we 
deleted did. 

4. In the URL text box, enter the path to the document containing the detail block. 

5. Under Parameters, in the Name text box, enter the name of the argument that will be sent to the 
detail document when the hyperlinked output field is clicked. We can use any name we like 
(without spaces), since we haven't declared the parameter in the detail block yet. Let's call it 
customerJD. 

6. Click the I ... | button next to the Value text box and select <f,Orders.Customer> again. Doing this 
specifies that the value of the argument should be the customer ID that the site visitor clicks. For 
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instance, if the visitor clicks customer ID 7, "7" is the value of the argument sent to the detail 
document. 

7. Click OK. Our new hyperlinked output field is inserted into the place where the ordinary output 
field used to be. 

8. Open or switch to the document containing the detail block (detail_customer.asp, in this example). 

9. Right-click anywhere in the detail block and select {Database > Document Properties...} in the 
shortcut menu. The Document Header Properties dialog box appears. 

10. Click the Parameters tab, and then click Add. A new argument will appear in the list, with the 
temporary name <New Arg>. 

1 1 . Type the name of the argument that we specified in step 5, customerJD and press <Enter>. The 
argument has now been declared. 

12. Click OK to close the dialog box. 

13. Right-click again anywhere in the block and select {Database > Block Properties...} in the 
shortcut menu. The Detail Block Properties dialog box appears. 

14. Click the Selection Statement tab. 

15. In the Where text box, type Customers. ID = <a,customer_ID>, or use the | ... | button next to the 
text box to build the statement term by term. (The "a" indicates that what follows is an argument.) 
This tells the detail block to display the record whose value in the Customers. ID field matches the 
value of the customerJD argument. 

16. Click OK to close the dialog box. 

17. Save the document. 

To see if the hyperlinked output field works correctly, switch back to the table block 
document, switch to the Preview window, and click one of the hyperlinked output fields. If the 
detail document loads in the Preview window and displays the customer record matching the 
customer ID that was clicked, the hyperlinked output field works. 
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Modifying database-related properties 

After completing the Database Wizard, if you are not satisfied with any of the choices you 
made in the wizard, you can modify them at any time in the Edit window. 

You can modify any of the choices you made in the Database Wizard except the data 
source and the document type. If you need to change the data source selection, you 
must create a new block using the wizard. 

Adding, removing, and editing parameters 

To add, remove or edit a parameter used by the document, right-click a block and select 
{Database > Document Properties...} in the shortcut menu. In the Parameters tab, use the Add 
and Remove buttons to add and remove user parameters. You can change the name of a user 
parameter by double-clicking its name. You can change the data type or input method of a 
user parameter by Double-clicking its entry in the appropriate column and selecting from the 
drop-down menu. 

Changing the list of included database fields 

To add or remove database fields from the list of included database fields for a block, 
right-click the block, select {Database > Block Properties...} in the shortcut menu, and then 
click the Database Fields tab. (This tab is identical to the Database Wizard step of the same 
name.) 

Changing the selection statement 

To change the selection statement for a block, right-click the block, select {Database > Block 
Properties...} in the shortcut menu, and then click the Selection Statement tab. (This tab is 
identical to the Database Wizard step of the same name.) 

Changing the input method or result URL for an input or 
modification block 

To change the input method or result URL for an input or modification block, right-click the 
block, select {Database > Block Properties...} in the shortcut menu, and then click the Input 
Method tab. 

Changing block element properties 

To change the properties of any block element (such as an output field, an input field, or an 
input control), double-click the element. 
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Chapter 19 

Charts 

Chart Overview 
Chart Types 
Creating a Chart 
Modifying Chart Properties 

Any time you have a table in your Web site that contains quantitative data, you can 
use Namo WebEditor's Chart Wizard to turn the table into 

a colorful chart in just a few steps. 




Chart Overview 



What are charts? 

Charts are a way to present tabular information— which may be difficult to grasp— in 
easy-to-understand visual form. By using lines, bars, columns, and other shapes (usually 
on a grid) to represent data values, charts simplify the presentation of complex data. They 
let you turn unintelligible tables into meaningful, impactful pictures. Traditionally, charts 
have been used in spreadsheets, slide presentations, and printed documents; but the 
explosion of the Web has created new applications for charts. Any time you have a table 
in your Web site that contains quantitative (numerical) data, you can use Namo 
WebEditor's Chart Wizard to turn the table into a colorful chart in just a few steps. The 
chart is inserted into the document as a standard GIF image, but you can edit its 
properties (data values, chart type, colors, etc.) of the chart at any time, and Namo 
WebEditor will automatically generate a new GIF image for it. Once you create a chart, it 
is no longer dependent on the table that provides the values for it. Even deleting the table 
will leave the chart unchanged. 



What is the Chart Wizard? 

Namo WebEditor's Chart Wizard guides you through three simple steps to create a chart 
from the information in a table. To use the Chart Wizard, click anywhere inside a table 
containing quantitative data and use the [Insert > Other > Chart...] menu command. 

Before using the Chart Wizard, you should be familiar with two basic concepts of charts 
and graphs: data series and categories. Every chart or graph has at least one data series-a 
series of values that changes over time or as some other variable changes. Whereas each 
category contains one value from each data series. Values to be compared are grouped 
into categories, and each category contains one value from each data series. 



What is the Chart Properties dialog box? 

This dialog box gives you complete control over the settings, formatting, and options of a 
chart created using the Chart Wizard. To access the Chart Properties dialog box, 
double-click a chart. 

Q If the Chart Properties dialog box looks strange on your monitor, please make 
sure you have the latest version of your video driver installed in your system. 
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Creating a Chart 



Starting the Chart Wizard 

Before starting the Chart Wizard, decide whether that you want to create a chart using all 
of the cells in a table or only some of the cells. If that you want to use an entire table, 
place the cursor anywhere inside the table. If that you want to use just some of the cells, 
select them by dragging the mouse button. Then, select the [Insert > Other > Chart...] menu 
command to start the Chart Wizard. Once you have completed the wizard, the chart will be 
inserted just below the table. 

Selecting a chart type (Step 1) 

1 . Select a basic chart or graph type using the buttons at the top of the dialog box. The basic chart 
types are: column, bar, line, scatter, pie, doughnut, stacked area, and radar. 

2. Select a chart or graph subtype using the large icons in the selection box. When you click a 
subtype icon, a description appears below the selection box. 

3. Under 3D effect, select Use 3D effect if you want the chart to use a 3D effect. (This option is not 
available for line, scatter, stacked area, or radar charts.) If you select Use 3D effect, also specify 
the depth of the 3D effect and the perspective angle. 



Chail Wizard - Char! Type [Slep 1 of 3) E| 




(Back I Next> I Finish I Cancel 



4. Click Next to continue to the next step of the wizard. 

Q Using 3D effect may make it somewhat difficult to read a chart accurately. In general, 
you should use a 3D effect only when that you want to communicate the relative sizes of 
values, rather than precise values. 
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Specifying series and categories (Step 2) 

In the second step of the Chart Wizard, you will tell the wizard how to "read" the table to create 
the chart you want. Although the wizard makes intelligent guesses to read the table, 
sometimes the guesses are wrong. This step gives you a chance to correct guesses the wizard 
makes. 

1. The wizard assumes that each column in the table contains a data series and that each row 
contains a category. If your table is arranged the other way around, then select Swap X/Y axis. 
Selecting this option does not actually transpose the rows and columns in your table. It transposes 
the rows and columns in the Chart Wizard's internal representation of the table, which is displayed 
in the Data preview in the top right corner of the dialog box. 

2. Based on the contents of your table, the wizard tries to guess whether the first row contains series 
names or values. The wizard automatically selects or deselects the First row contains series 
names option, depending on its guess. You can manually decide whether to select First row 
contains series names and First column contains category names check boxes. 

Series and categories Data pievie'-i 

r First row contains series names - - 

Title 

l~ First column contains category names 

3 4 
5 6 

X/Y axis — 



I - Swap X A 1 axis Chart preview 




< Back I Next > I Finish Cancel 



3. Check the appearance of the chart under Chart preview, and then click Next to continue to the 
third and last step of the wizard. 
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Specifying chart titles (Step 3) 

In the last step of the Chart Wizard, you enter an optional chart title, choose its position, and 
enter optional axis titles. 

1. Enter a chart title in the Chart title text box and select its position using the radio buttons under 
Chart title location. 

2. Enter titles for the X and Y axes under Axis titles. 

3. Check the appearance of the chart under Chart Preview, and then click Finish to exit the Chart 
Wizard. The chart will be inserted just under the table from which it was created. 



Chart Wizard - Title [Step 3 oi 3) B| 




< Back Finish I Cancel 
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Chart Types 



Column Charts 

Description 

Like bar charts, column charts are used to compare the magnitude of several items, especially 
over time. 



Vehicle Demand in Europe 




□ Number of Cars 



A stacked column chart is used to show how each datum changes with respect to the entire 
data group. In particular, 3D column charts, like the one below, make it possible for data to be 
compared and to show trends in two axes. 
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Bar Charts 

Description 

Bar charts are used to compare the magnitude of several items. 



1996 Export Volumes 




A stacked bar chart shows, for each item, the contribution of several categories to a total. 



1997 -2000 Export Volumes 




Units 

□ Canada □ US Q France |£ UK 



Line Graphs 

Description 

Line graphs are commonly used to show trends over a period of time. 
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Scatter Graphs 



Description 

Scatter graphs are used to display many kinds of data, especially scientific data. 
They are commonly used to show time-based processes or trends. 



Daily Mean Temperature Area A 
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Pie Charts 

Description 

Pie charts show the percentage contribution of several items to a total. 



Projected Market Share 





□ Brand A fj Brand B fj Brand C Q Brand D fj Brand E 



The left example shows a dominant item being emphasized. You can also isolate an item, as in 
the example on the right. 
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Doughnut Charts 

Description 

Doughnut charts, like pie charts, can show the percentage contribution of several items to a 
total, but they can show several categories together. 

Market Share from the year of 1999 to 2000 



Stacked Area Charts 

Description 

Stacked area charts are typically used to show how the contribution of several items to a total 
changes over time. 




□ NamoWE4.0 



□ Pro A 

□ Pro e 

□ Pro C 
■ Pro f> 



Sales Volume by Country 
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Radar Charts 



Description 

A radar chart is often used to compare data values. It is useful for assessing which kinds of 
data are dominant and in what items, and for analyzing relationships between items and kinds 
of data. 



Favorite Subjects by Year 




Second language 

•W 6th year 
5th year 
« 4th year 

Athletics 



Music 
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Modifying Chart Properties 



Resizing and modifying a chart 

Charts can be resized with no loss of sharpness, because Namo WebEditor generates a new 
GIF image for the chart every time you resize it. 

1 . Select the chart by clicking it once. 

2. Click and drag any of its resize handles to the size you want. 

Market Share 




: 



Various properties and options of a chart can be modified in the Chart Properties dialog box. 
To open the dialog box, double-click a chart. The dialog box consists of seven tabs. The first 
tab, Chart Type, lets you change the chart's type or subtype; it is identical to the first step of the 
Chart Wizard. The second tab, Title, lets you change the chart's title and axis titles; it is the 
same as the third step of the Chart Wizard. 

13 When you resize a chart, its text elements, such as titles, axis labels, and legend 
labels, remain the same size. The size of the text elements can be modified in the Chart 
Formatting tab of the Chart Properties dialog box. 



Changing the chart type 

You can change the chart type after creating one. There are 8 different chart types provided in 
the Chart Wizard that you can choose from; Column Chart, Bar Chart, Line Graphs, Scatter 
Graphs, Pie Chart, Doughnut Chart, Stacked Area Chart and Radar Chart. 

To change the chart type, double-click the chart or select Chart Properties... from the chart 
shortcut menu. In the Chart Type tab of the Chart Properties dialog box, select the chart type 
you want and specify other settings such as 3D effect. 

H Using 3D effect may make it somewhat difficult to read a chart accurately. In general, 
you should use 3D effect only when that you want to communicate the relative sizes of 
values, rather than precise values. 
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Changing the chart type 

1 . Create a chart. 

2. Double-click the chart or select Chart Properties... from the chart shortcut menu. 

3. In the Chart Type tab of the Chart Properties dialog box, select Bar chart' using the buttons at the 
top of the dialog box. Select '100% stacked bar' subtype using the large icons in the selection box. 
When you click a subtype icon, a description appears below the selection box. 

4. Under 3D effect, select Use 3D effect check box. 

5. Confirm the appearance of the chart in the Chart preview and click OK. 

Changing the chart title 

To change the chart title, double-click the chart or select Chart Properties... from the chart 
shortcut menu. In the Title tab of the Chart Properties dialog box, enter a new title in the Chart 
title text box. 

Modifying the chart title 

1 . Create a chart. 

2. Double-click the chart or select Chart Properties... from the chart shortcut menu. 

3. In the Title tab of the Chart Properties dialog box, enter 'Market Share' in the Chart title text 
box. 

4. Specify the Chart title location to 'Center, Top'. 

5. Change the X-axis title to 'Country'. 

6. Confirm the appearance of the chart in the Chart preview and click OK. 

Modifying a chart's appearance 

The Chart Formatting tab of the Chart Properties dialog box enables you to modify the 
appearance of any of the elements in a chart. The appearance properties are divided into four 
categories: Text, Color, Lines/borders, and Data points. Not every category is applicable to 
every chart element. For instance, text attributes are not applicable to gridlines. If a category 
is not applicable to the selected element, the options in the category are disabled. The Data 
points category is only applicable to data series. 

1 . First, select an element in the list box on the left side of the dialog box. Each data series is listed in 
the list box by a number in brackets, followed by the series name, if any; for example, "[3]France". 
If the chart has trend lines, each trend line is listed by the name of the data series to which it 
applies, followed by the trend line type; for example, "France, Linear". 

2. Some elements have optional properties that are hidden by default. For instance, the main title 
can have a background color and a border, but these are hidden by default. To show the property, 
deselect the Hide check box next to the property control, and specify the settings 

3. Use the Element preview and Chart preview to check the effect of any modification you make to 
the elements. 
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H If you select Background in the element list and select Hide in the Color category, 
the chart's background will be made transparent. 

Adding and removing data series or categories 

You can use the Values tab to add or remove data series or categories in the chart by adding or 
removing columns or rows in the table at the top of the dialog box. 

1. To add a new data series, right-click a column header and select Insert Columns in the shortcut 
menu. The new data series will be inserted to the left. 

2. To add a new data series at the end, right-click the gray area to the right of the last column header. 

3. To add a new category, right-click a row header and select Insert Rows in the shortcut menu. The 
new category will be inserted above the selected row. 

4. To add a new category at the end, right-click the gray area below the last row header. 

5. After adding a data series or category, enter its name and values directly in the table by 
double-clicking each cell, or use the Value text box. 

6. To delete a data series or category, right-click the corresponding column or row header and select 
Delete Columns or Delete Rows in the shortcut menu. 

7. To undo any changes, press <Ctrl + Z>. Press <Ctrl + Z> to repeatedly undo multiple changes. 
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Modifying series options 

The Series tab of the Chart Properties dialog box lets you modify a number of options for each 
data series in a chart. In addition, it lets you select a location for the chart's legend or hide the 
legend. To modify options for a series, first select the series in the list box on the left side of 
the dialog box. The options are described below. 

Series name 

The name of the selected series. If you select First row contains series names check box in the 
second step of the Chart Wizard, the existing name can be changed. Otherwise, you can enter a 
name in the text box. The series name is used to identify the series in the chart's legend. 

Plot series on 

By default, the values in all series are plotted on the primary Y axis, of which the scale is on the 
left side of the chart. To plot the selected series on the alternate Y axis, select Alternate axis. The 
alternate axis's scale will be added on the right side of the chart. (Use the settings in the Axis tab 
to modify the alternate axis's properties.) 

Data labels 

Select a type of label to put next to each data point. The available choices are None, Series name, 
Data value, and Percentage with markers. 

3D pie chart options 

For a pie or doughnut chart with the 3D effect enabled, you can choose to pull out or raise up the 
"slice" corresponding to the selected series, in order to make it stand out from the other slices. 

Error bar format 

Column and bar charts, and line graphs, can have error bars on the data points in any series. 
Choose an error bar format in the drop-down menu, and then choose an error format using the 
radio buttons. 

Legend position 

Select the legend location or Hide legend to hide the legend. 

Modifying axis options 

The Axis tab of the Chart Properties dialog box lets you configure the scale of the primary Y 
axis and, if it exists, of the secondary Y axis of a chart. 

1 . Select a Y axis to modify in the list box on the left side of the dialog box. 

2. To change the scale type from the default linear scale to another type, select the type in the Scale 
type drop-down menu. In addition to linear, two logarithmic scale types are available. 

3. By default, the scale ranges and interval between gridlines are configured automatically. To 
configure the range and intervals of the selected scale manually, deselect Configure data range 
automatically, and then enter minimum and maximum values, the interval between major 
gridlines, and the number of minor gridlines between major gridlines. 

4. You can also edit the title of the selected axis in the Title text box. 
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Editing the values in a chart 

Once you create it, a chart is not dependent on the table from which it was created. The Chart 
Wizard copies the names and values from the table to the part of the document that is invisible 
in the Edit window or a browser, and these copies are what the chart displays. As a result, you 
cannot edit the values in the chart by editing the values in the table from which it was created. 

You can, however, edit the values in a chart using the Values tab of the Chart Properties dialog 
box. You can also use this tab to swap the axes of the chart, so that data series become 
categories, and vice versa. The spreadsheet-like table at the top of the dialog box displays the 
series names, category names, and values used in the chart. 

1 . To edit a name or value, double-click it in the table and enter a new name or value. 

2. Alternatively, select the cell containing the name or value and edit it in the Value text box. 

3. To undo a change, press <Ctrl + Z>. Press <Ctrl + Z> to repeatedly undo multiple changes. 

4. Click Swap X/Y Axis to swap the data series and categories in the chart. 

Adding trendlines 

The Trendlines tab of the Chart Properties dialog box enables you to add a trendline to any data 
series in a chart. 

1 . Select the series in the list box under Select series. 

2. Select a trend line type in the list box under Trendline type. 

3. If the selected trend line type is Moving average, specify the Interval under Trendline options. If 
the selected trend line type is Polynomical, specify the Degree under Trendline options. 

4. Click Add. The specified trendline will appear in the list box under Displayed trendlines. 

If that you want to show the data series and type of each trend line in the legend, select Show 
trendlines in legend under Trendline options. The color, style and thickness of each trendline 
can be modified in the Chart Formatting tab. 

Changing the default folder for chart image files 

By default, Namo WebEditor saves a chart image in a sub-folder named "images" in the folder 
containing the document that contains the chart. This folder is created automatically if it does 
not already exist. For example, if a document containing a chart is saved in C:\html, Namo 
WebEditor saves the chart images in C:\html\images. 

1. Select [Tool > Preferences...] in the menu to open the Preferences dialog box. 

2. Switch to the Save tab. 

3. In the Save Smart Button, equation and chart images in text box, enter the path of the folder in 
which to save chart images, in terms relative to the document folder. 

4. Click OK. 

All new chart images will be saved in the specified folder relative to the document folder. Any 
existing chart images in an open document will be copied to the new folder when the 
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document is saved. However, any existing chart images in a document that is not open will be 
copied to the new folder until you open the document. 

Below are some examples of relative folder paths. 



Folder path 


Location of folder 


images\ 


A subfolder of the document folder. 


images\charts\ 


A subfolder of a subfolder of the 
document folder, 


•\ 


The document folder itself, 


•A 


The parent folder of the document folder. 


..\images\ 


A folder at the same level as the 
document folder, 



Q When publishing a document containing charts, be sure also to publish the folder 
containing the chart images. 
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Chapter 20 

Task Automation 



Task Automation Overview 
Working with Quick Insert 
Working with Key Macros 
Creating a Table of Contents 



Namo WebEditor's task automation features help streamline your workflow 
when you have tasks that must be repeated many times. 



Task Automation Overview 



What is a Task Automation? 

It is very likely that you will perform some tasks repeatedly while editing your Web 
documents. There is no need to repeat the same task over and over again. Instead, you can use 
Namo WebEditor's task automation features, which include Quick Insert, Key Macros, and 
Document Outline. 

Quick Insert 

Quick Insert provides a quick way to insert long, frequently-used phrases, sentences, or 
paragraphs without having to retype them each time. You can enter a single word or even a single 
character, then type <Ctrl + => to instantly replace the shortcut with the actual text. To add a Quick 
Insert item including font or paragraph styles, you should save the item as an HTML file. 

Macros 

A macro allows you to record a repeated sequence of keystrokes and execute it in a single 
command. While Quick Insert relieves you from the chore of repeatedly inserting the same item, a 
macro lets you take care of repeated steps, such as copying and pasting a word or phrase. If you 
find yourself using the same sequence of keystrokes repeatedly, you can record a key macro to 
save the sequence. Then, rather than always retyping the same keystrokes, you can simply play 
the macro. Since all menu commands, and most operations in dialog boxes can be accomplished 
using keystrokes, key macros can do much more than just input text. Key macros do not record 
mouse movements or clicks, so avoid using the mouse while you are recording a key macro. 
Accordingly, when recording a macro, you should perform a set of tasks, which are supported by 
Namo WebEditor's shortcuts, using only the keyboard. 

Inserting a document outline 

Namo WebEditor supports document outline creation, which lets you grasp the structure of a 
document. Select the [Window >Document Outline] menu command or press the shortcut key 
<Alt+3> and a document online is created including the paragraph headings and list items within 
the document. Using this feature, you can also create a table of contents for the document. The 
Make Table of Contents command takes care of a series of tasks automatically, including inserting 
bookmarks in each heading or list items, and creating hyperlinks linking the table of contents and 
the created bookmarks. 
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Working with Quick Insert 



Using Quick Insert 

You can insert a Quick Insert item into the document. 

1 . Place the cursor where you want to insert a frequently used phrase or sentence as a Quick Insert 
item. 

2. Select the [Tools > Quick Insert...] menu command. 

3. In the Quick Insert dialog box, select the desired item among the ones you have added and click 
Insert. 

4. Click Close. 

S) Alternatively, you can insert a Quick Insert item by typing in its shortcut and pressing 
<Ctrl + => in the Edit window. 

Adding a Quick Insert item 

You can rapidly edit your Web document by saving frequently used phrases or sentences as 
Quick Insert items. 

1. Select the [Tools > Quick Insert...] menu command. 

2. In the Quick Insert dialog box, click Add.... 

3. In the Add Quick Insert dialog box, enter the shortcut which will be used to trigger the Quick 
Insert item. 

4. Choose Text to enter the replacement text directly in the dialog box. Enter the text in the provided 
text box. You can enter only plain unformatted text in the Text field. If you want to insert formatted 
text using Quick Insert, enter the formatted text into an HTML file, save the file, then specify the 
file in the File field. 

5. Click OK. To add more Quick Insert items, repeat steps 2-4. 

6. In the Quick Insert dialog box, click Close. 

B3 To remove a Quick Insert item, select the item you want to delete in the Quick Insert 
dialog box and click Remove. The message "Are you sure you want to delete the 
selected item? *" appears. Click Yes and the selected item is removed from the list. 

Q If you use the Text field for adding a Quick Insert item, you cannot add items 
containing font or paragraph styles. To add a Quick Insert item including such styles, you 
should save the item as a HTML file select the file by checking File and specifying the file 
after clicking the Browse... button. 
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Working with Key Macros 



Working with key macros 

You can create a key macro by recording key strokes either after or before naming it in the 
Key Macro Manager dialog box. 

Recording a key macro after naming it 

1. Select the [Tools > Key Macro > Key Macro Manager...] menu command. 

2. In the Key Macro Manager dialog box, click Add.... 

3. In the Add Key Macro dialog box, enter Macro name and Description. 

4. Select Record new macro under Source and click OK. 

5. The mouse pointer changes into a small cassette tape ) icon while the Edit window appears. 

6. Perform the sequence of keystrokes you want to record. 

7. Select the [Tools > Key Macro > Stop Recording] menu command. 

Saving a previously recorded macro 

1. First, Record a key macro. 

2. Select the [Tools > Key Macro > Key Macro Manager...] menu command. 

3. In the Key Macro Manager dialog box, click Add.... 

4. In the Add Key Macro dialog box, enter Macro name and Description. 

5. Select Saving a previously recorded macro under Source and click OK. 

6. In the Key Macro Manager dialog box, click Close. 

Recording a key macro 

Macro remembers a sequence of keystrokes and automatically repeats them in a single 
command. You need to record the keystrokes as a macro before using it. 

1. Select the [Tools > Key Macro > Start Recording] menu command. Your mouse pointer changes 
into a small cassette tape (|^| ) icon. 

2. Perform the sequence of keystrokes that you want to record. 

3. Select the [Tools > Key Macro > Stop Recording] menu command. 

H You can start and stop recording key macros using the <Ctrl + Shift + M> shortcut 
key. 
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Playing a key macro 

Play a key macro you have previously recorded. Either play the most recently recorded key 
macro using a shortcut, or select from the list in the Key Macro Manager dialog box. 

Playing the most recently recorded key macro 

1 . Record a key macro. 

2. Select the [Tools > Key Macro > Play Macro] menu command or press the shortcut key <Ctrl + 
M>. The macro you have just recorded is executed. 

Selecting and executing a key macro among the ones you have previously 
recorded 

1. Select the [Tools > Key Macro > Key Macro Manager...] menu command or press the shortcut 
key <Ctrl + Shift + 0>. 

2. In the Key Macro Manager dialog box, select the desired macro, specify how many times you 
want to repeat the macro in the Repetitions text box, and click Play Macro. 
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Creating a Table of Content 

You can create a table of contents for your Web document. Namo WebEditor automatically 
generates a table of contents utilizing HTML styles applied to the texts. You can preview the 
table of contents on the gray left side of the Edit window, and edit it by changing paragraph 
style of the texts. In the table of contents, Heading 1 will be the biggest title while Heading 6 
being the smallest. 

1 . Create a document in the Edit window. 

2. Select the [Window >Document Outline] menu command. 

3. A document outline is displayed at the left side of the Edit window. 

4. Right-click the document outline and specify the hierarchy of the items that will be displayed in the 
table of contents to be created. If you select Show All, all the headings will be displayed. 

5. Right-click the document outline and click Make Table of Contents.... 

6. In the Make Table of Contents dialog box, check both Create hyperlinks to the contents and 
Insert bookmarks when making hyperlinks. 



Make Table of Contents |~~ 



W Create hyperlinks to Ihe contents 
W Insert bookmarks when making hyperlinks 
I ndent spacing: |2 ^ spaces 

| OK 

7. Click OK. 

Q To create a document outline, the title of your Web document should be specified as 
a heading using HTML Style from the drop-down menu on the Formatting Toolbar. 
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Chapter 21 

Source Control 

Source Control Overview 
Working with Source Control 



Source control is an effective way to avoid problems that arise when a team 

collaborates on the same set of documents. 



Source Control Overview 



What is Source Control? 

If several people work on the same Web site project, it can occasionally occur that two or 
more people try to edit the same document simultaneously, which would result in 
conflicts when the document is saved. This problem can be avoided by having each user 
make a copy of the file on their local hard drive and only edit the local copy. This 
approach, however, creates another problem: you may not be able to keep track of which 
copy is the latest version, especially if more than one person copies the document. 

Source Control is an effective way to avoid problems that arise when a team collaborates 
on the same set of documents. The basic idea of Source Control is that a database on the 
network stores the master copies of all documents and keeps track of who is working on 
a particular document. Users must "check out" a document before editing it, which makes 
a copy of the document on the user's local drive and prevents others from editing the 
document. When a user is finished editing, he or she "checks in" the document with the 
Source Control database, updating the master copy stored there. Also, If a user opens a 
local copy of a document without checking it out, he or she will not be able to make 
changes to the document. This prevents files from accidentally being replaced by another 
user's changes. Namo WebEditor's implementation of Source Control leverages Microsoft 
SourceSafe software already installed on your network. If that you want to take 
advantage of Namo WebEditor's Source Control features, you must first install 
SourceSafe. 

How Namo WebEditor implements Source Control 

To implement Source Control features, Namo WebEditor interfaces with Microsoft 
SourceSafe, a popular Source Control software product. The Source Control menu in 
Namo WebEditor's Site Manager contains commands for working directly with a 
SourceSafe database. You can add a WebEditor project to the SourceSafe database, add 
or remove documents to or from Source Control, check in or check out documents, and 
get the latest version of a document, all from one menu. To use Namo WebEditor's 
Source Control features, you need to have the SourceSafe server software installed on 
your network server, have or create a SourceSafe database on the server to store your 
Web project, and install the SourceSafe client software (SourceSafe Explorer) on each 
user's computer. Also, each user must be granted appropriate access rights to the 
SourceSafe database. 

B3 You can use the SourceSafe function only when working with Site Manager. 

B3 The Source Control instructions assume that you have the SourceSafe client 
software on your computer and have access rights to the SourceSafe database. 
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Working with Source Control 



Connecting to Source Control 

Connect to Source Control with your Username and Password. You must have an ID registered 
in SourceSafe program to transfer files to Source Control. 

1. First, check whether SourceSafe has been installed on your local hard drive. If not, you cannot 
select the menu to connect to Source Control. 

2. Select the [File > Site > Open Site...] menu command. 

3. In the Open dialog box, select the site you're going to work with and click Open. 

4. Select [Tools > Source Control > Connect Source Control Database...] in the main menu or 
select [Source Control > Connect Source Control Database...] in the Site Manager. To upload 
files to the SourceSafe server, the user ID should be registered with the SourceSafe server 
application. 

5. In the Source Control Login dialog box, enter the Username, Password, and Database and 
click OK. 

6. In the Select Source Control Project dialog box, select the path of a project, or create a new one, 
and click OK. 

Project path: 
$/WebEditot 

7. Select the files to add in File List in Add Files to Source Control. At your first connection, it is 
advised to click the Select All button and register all the files. 

8. Enter a brief description of the files to be added in the Comment text box and click OK. 

H Once you have connected to Source Control, the information on this connection is 
recorded in the site file of Namo WebEditor (*.wej). This will provide you with automatic 
connection to Source Control upon subsequent connections. 

Disconnecting from Source Control 

1. Select [Source Control > Disconnect] in the Site Manager window. 

2. The message "Use this Source Control in the future?" appears. 

3. If you select 'Yes', you need not specify the path of the Source Control at the next connection to 
your source safe. The path of the Source Control is automatically designated upon the next 
connection. 

4. If you select 'No', you should designate the path of your Source Control at the next connection. 

Launching SourceSafe Explorer 

Launch VSS Explorer from Namo WebEditor. 
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1. Select [Tools > Source Control > Launch VSS Explorer] from the main menu or select [Source 
Control > Launch VSS Explorer] in the Site Manager. 

2. The SourceSafe application is launched. 

Creating a new SourceSafe project 

1 . Create a new Web site, or open an existing site. 

2. Switch to the Site Manager. 

3. In the Source Control menu, select Connect to Source Control. The Source Control Login 

dialog box will appear. 

4. Enter your SourceSafe user name and password. 

5. Click the Browse... button next to the Database text box, and then locate and select a SourceSafe 
database on your network server. 

6. Click OK to log in to the SourceSafe database. The Select Source Control Project dialog box will 
appear. 

7. Click New Project. The New Project dialog box will appear. 

8. In the Project name text box, enter a name for the new SourceSafe project. You do not need to 
use the same name as the Namo WebEditor site. 

9. In the Comment text box, optionally enter a brief description for the new project and click OK. The 
Add Files to Source Control dialog box will appear. 

10. The File list pane lists all the files in your current Web site. Select the files in the Web site that you 
want to add to the SourceSafe database. (Initially, all of the files are selected.) Optionally, type a 
comment in the Comment text box, and then click OK. 

Getting the latest version of files 

Get the latest version of the file from the Source Control to your computer. To use this function, 
you must have the connection to SourceSafe, and working folder to which SourceSafe files are 
copied must be specified. 

1 . Add the collaborative files to Source Control. 

2. In the Site Manager, select the files to bring into your local folder. 

3. Select [Source Control > Get Latest Version...] in the menu. 

4. Click OK to continue. 

Q To use Get Latest Version, you should connect to Source Control and set the 

working folder in your local hard drive, where the files from the SourceSafe are to be 
copied. 

Checking files back in to Source Control 

Once you've finished editing a file you'd checked out from Source Control, you must check it 
back in, thus storing your changes in the Source Control database and allowing others to 
modify the file. 
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1. Select the [File > Site > Open Site...] menu command. 

2. In the Open dialog box, select the site you're going to work with and click Open. 

3. In the Site Manager, select the files you want to check in among the files with the check out mark 
(HI) ' n tne Navigation Tree at the right side. You can display this Source Control status icon 
also in the Local file list by adding the Source Control status bar in the Customize Columns 

dialog box. 

4. Select the [Source Control > Check In...] menu command in the Site Manager window. 

5. In the Check In Files dialog box, select the files you want to check in. Optionally, you can enter a 
comment in the Comment text box describing the changes you've made to the files. Click OK. If 
you want to keep editing the files even after you've checked in, check Keep these files checked 
out in the Check Files In dialog box. 

Checking files out of Source Control 

To make changes to a document under Source Control, you must first check it out of the 
Source Control database. When you check a file out, a copy of the file is created on your hard 
drive (replacing any old copies) and your ID is shown in SourceSafe server to show who has 
checked the file out. A file that you have checked out cannot be checked out by anyone else at 
the same time, unless your SourceSafe administrator has allowed multiple check-outs. While 
a file is checked out, others can view the file but not modify it. You can check out one file, 
multiple files, or all the files in a SourceSafe project. 

1. Select the [File > Site > Open Site...] menu command. 

2. In the Open dialog box, select the site you're going to work with and click Open. 

3. Select the files you want to check out in the Site Manager. 

4. Select the [Source Control > Check Out...] menu command in the Site Manager window. 

5. Select the files you want to check out in the Check Out Files dialog box and click OK. 

6. You can check the status of the checked out files by locating the check out mark (Hf) in the 
Navigation Tree at the right side. You can display this Source Control status icon also in the 
Local file list by adding the Source Control status bar in the Customize Columns dialog box. 

Q Get Latest Version and Check Out... performs the same task of copying files from 
your SourceSafe server. The difference between the two is that Get Latest Version 
maintains the read-only property of the copied files while Check Out... does not. You can 
edit the files only after you check them out. 

Undoing check out 

The Undo Check Out command undoes your last check-out, canceling your changes both in the 
master copy in Source Control and in your local copy. The file or project remains the same as 
it was when you checked it out. 

1. Select [File > Site > Open Site...] from the menu. 

2. In the Open dialog box, select the project you're going to work with and click Open. 
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3. In the Site Manager, select the files whose check-out should be undone from among the files with 
check out mark (jg§) in the Navigation Tree at the right side. You can display this Source Control 
status icon also in the Local file list by adding the Source Control status bar in the Customize 
Columns dialog box. 

4. In the Site Manager, select [Source Control > Undo Check Out...] from the menu. 

5. In the Undo Checkout dialog box, confirm the files to undo check-out and click OK. 

Adding/deleting files from Source Control 

You can add project file(s) to, or delete from the Source Control. 

1. Select the [File >Site > Open Site...] menu command. 

2. In the Open dialog box, select the project you are going to work with and click Open. 

3. Connect to Source control by selecting [Source Control > Connect to Source Control 
Database...] in the Site Manager. 

4. Select the files to be added to, or deleted from, the file list of the Site Manager. 

5. Select the [Source Control > Add to Source Control. ../Remove from Source Control...] menu 
command of the Site Manager window. 

6. In the Add Files to Source Control/Remove files from Source Control dialog box, select the files 
to add or remove from the File list and click OK. 

7. You can check which file has been added to/removed from the Source Control in the Site 
Manager by checking the Source Control icon in the Navigation Tree or in the Local file list. When 
added, the icon appears on the Navigation Tree. When deleted, the icon disappears from the 
Navigation Tree. 

Q By default, the Source Control status icons are displayed only in the Navigation Tree 
on the right side. You can display this Source Control status icons also in the Local file 
list by adding the Source Control status bar in the Customize Columns dialog box. 
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Chapter 22 

Working with HTML Sources 

HTML Source Editing Overview 
Inserting HTML Tags 
Cleaning Up HTML Sources 
HTML Verification 
Using External Source Editing Programs 



For intermedite and advanced users, Namo WebEditor includes a powerful, built-in 
HTML source editing environment. Preserve handwritten source intact or let Namo 

WebEditor reformat and clean it up: the choice is yours. 



HTML Source Editing Overview 



HTML window 

In Namo WebEditor 5.5, you can edit Web documents either by using the WYSIWYG 
Edit window or manually inserting HTML sources in the HTML window. Press the <F6> 
key to move to the HTML window while you are editing. 

When you switch from visual mode to HTML mode, Namo WebEditor places the cursor 
at the location in the source most closely corresponding to the position of the cursor in 
the Edit window. The same is true when going in the other direction. 

Namo WebEditor provides automatic line breaks for long HTML sources and applies 
colors to HTML sources to increase readability. 

You can also automatically insert HTML sources in the HTML window using the menu 
command and tool buttons. For example, you can use the toolbar to insert tables in the 
HTML window. 



1 

2 


<html> 


3 


<head> 


4 


<title>No title</title> 


5 


■Sitieta name™ "generator" content™ "Namo HebEditor vS.5"> 


6 


:./'head> 


7 




8 


<body bgcolor= "white" text="black" link="blue" vlink= "purple" alink="red"> 


9 


C'p> J > 


10 


</body> 


11 




12 


</html> 



Automatic tag insertion in the HTML window 

Certain HTML tags can be inserted in the HTML window using toolbar buttons and menu 
commands rather than typing them by hand. 

The following items in the Insert menu are available: 

• Line Break submenu 

• Horizontal Line 

• Comment 

• Image 



324 | Chapter 22 



• Image Element > Clip Art 

• Image Element > Background Image 

• Form Field submenu 

• Script > Body Script 

• Object > Java Applet 

• Object > Plug-In 

• Object > ActiveX Control 

• Hyperlink 

• Other > Date and Time 

• Other > Non-Breaking Space 

In the Table menu, New Table is available. 

The following buttons on the Standard Toolbar are available: 

• Insert Clip Art 

• Insert Image 

• Create Table 

• Hyperlink 

The following buttons and menus on the Formatting Toolbar are available and operate on 
the current selection: 

• Font menu 

• Font Size menu 
. Bold 

• Italic 

• Underline 

Editing the HTML source of a frameset 

When you work on a frameset, the HTML tab displays the HTML source of the document 
in the active frame. To view or edit the source of the frameset document, use the Frameset 
Source tab. 
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What is HTML Clean Up? 



When you import external HTML files made with Microsoft Office or Web documents 
made by someone else, it is likely that unnecessary tags will be included. Namo 
WebEditor 5.5 removes unnecessary and redundant tags automatically. 

• Removes tags that are generated when importing Microsoft Word files. 

• Removes empty tags and redundant tags. 

• Removes unnecessary closing tags such as '</p>'. 

• Changes indentation and line change rules. 



What is HTML Verification? 

Differences in HTML versions and Web browsers may cause improper interpretation of 
the HTML source. For example, the cancel tag '<s>' is not adequately interpreted in 
Netscape version 3. 

Namo WebEditor verifies whether the Web document will be properly interpreted with 
certain versions of HTML protocol, and whether the Web document will be shown 
adequately in certain types of browsers. 

Select the HTML versions from HTML 2.0, 3.0, and 4.0, and browser types from Internet 
Explorer and Netscape Navigator. 
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Inserting HTML Tags 



If that you want to insert a tag that Namo WebEditor does not support, you can edit manually 
in the HTML window or use the HTML Tag Attributes dialog box. 

Select the [Insert > Other > HTML Tag...] menu command. In the HTML Tag Attributes dialog box, 
enter tag name and click New... to open the Attribute Name and Value dialog box where you can 
insert attributes in the tag. 

Making the mouse-pointer change into a hand shape when you move the mouse 
over the text 



1. 

2. 
3. 
4. 



Insert text in the Edit window. 

Place the cursor before the text and select the [Insert > Other > HTML Tag...] menu command. 
Enter 'p' in the Tag name text box in the HTML Tag Attributes dialog box. 

Click New..., and enter 'style' and 'cursor:se-resize' in Name and Value, respectively and click OK. 



2^ 



Tag name: 



Depending on the tag, the result may not be visible h the Edit 
window or a browser 



Attribute Name and Value 



*1 



Name: style 



Value: se-resue 




5. Click OK in the HTML Tag Attribute dialog box. 

6. Place the cursor after the text and select the [Insert > Other > HTML Tag...] menu command. 

7. Enter 7p' in the Tag name text box in the HTML Tag Attribute dialog box and click OK. 

8. Switch to the Preview tab to verify. 
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Cleaning Up HTML Sources 

You can remove unnecessary tags using HTML Clean Up. 

HTML Verification 

Performs HTML verification without changing the layout of the source. 

1. Open a Web document. 

2. Select the HTML tab. 

3. Select Clean Up HTML... in the shortcut menu. 

4. In the Clean Up HTML dialog box, select Remove empty tags, Remove redundant tags and 
Integrate adjacent <font> tags when possible and deselect all others. 

5. Click OK. 

Cleaning up Microsoft Word specific tags 

1 . Open a Web document. 

2. Select the HTML tab. 

3. Select Clean Up HTML... in the shortcut menu. 

4. Select 'Remove MS-Word 2000 tags' and click OK. 

5. If that you want, select Remove specific tag and specify the tag you want to remove. 

H Selecting Remove optional closing tags will reduce the size of the Web document 
considerably. 
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HTML Verification 



Verify the compatibility of the HTML source of the Web document. The verification displays 
the result in the window (HTML tab) below the HTML window. The result window shows the 
line number where the error has occurred and description of the error. When an error or 
warning is found, click the item and the line with an error will be highlighted. 



Verifying HTML compatibility 

Verifies if the Web document is compatible with the selected HTML version. 

1 . Open a Web document. 

2. In the HTML tab, and select {Verify HTML...} in the shortcut menu. 



1 <html> 
2 

|E 3 <hettad> 

4 <title>No title</title> 

5 <meta name =" generator" conte 

6 </head> 




12 </ I ^ Show Source Coloring 
13 



Verify HTML. 



Clean Up HTML. 



Source Editing Options.. 



|\ Edit A HTML [F6)A Preview / || 



Select the version of HTML. For example, if you want to verify if the document is compatible with 
HTML 2.0 and 3.2, select HTML 2.0 and HTML 3.2. 

Click OK and verification will perform. 



Line | Message 



*J| Line 

llLiav 



<hettad> is not recognized. 
Missing <head>. 

Discarding unexpected <hetlad>. 
3 warnings/errors were found. 



Verify HTML/" 
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Browser compatibility 

Major browsers are made to comply with HTML protocols. But each browser has its specific 
tags that other browsers might not understand. Verify if the Web documents contain the 
specific tags that some browsers might not be able to interpret. 

1. Select Check for browser specific tags. 

2. Select one from the following: 

• Check for Internet Explorer specific tags 

to search for Internet Explorer specific tags. 

• Check for Netscape Navigator specific tags 

to search for Netscape Navigator specific tags. 

3. Click OK and verification will perform. 

H If you select only Check for browser specific tags but not Check for Internet 
Explorer specific tags and Check for Netscape specific tags, the verification will search 
for specific HTML tags that other browsers other than those two support, (e.g. Opera). 
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Using External Source Editing Programs 

You can use external source editing programs along with Namo WebEditor 5.5. 

1. Select the [Tools > Preferences...] menu command. 

2. Select the External Programs tab. 

3. Enter the name of the program in the Name text box, and enter the location of the execution file or 
click Browse... to browse. Notepad is registered as Program 1 by default. 

4. Click OK, and select the [Tools > External Programs > Notepad] menu command. 

5. The document you are editing currently will be opened in Notepad. 

6. Edit the document in Notepad and save after editing. 

7. When you activate the Edit window again you will be asked whether to reload the document. 

8. Click Yes to update the Edit window. 
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Chapter 23 



Namo Image Slicer 

Namo Image Slicer Overview 
Working with Namo Image Slicer 



Use Namo Image Slicer to "slice" images into several smaller images 
for faster downloading and more flexible layouts 



Namo Image Slicer Overview 

Images are crucial graphic elements for Web design. However, embedding a large image 
file in a Web document makes the downloading time too long, which becomes a 
distracting factor for your site visitors. For such case, dividing the large image into 
multiple small images and inserting them in a Web document can be a wise solution. 
Namo Image Slicer is a graphic tool with which you can "slice" various types of images 
(*.psd, *.jpg, *.gif, *.png, *.bmp) into several smaller images and also save them in 
various formats. 

The followings are advantages of dividing a large image into several small images. 

• You can save the sliced images as different file formats. A sliced image containing only a 
few colors can be saved as a GIF file; another sliced image with a large number of colors 
can be saved as a JPG file. Some can be highlighted by inserting an animated GIF into it. 

• You can reduce the file size by substituting plain cells for the unnecessary (or unwanted) 
image slices. 

• Inserting an image slice as a cell background image allows you to insert text or even 
other images over the sliced image in the cell. 

• Because it takes less time to download smaller images when you view the document in a 
Web browser, you can reduce the downloading time greatly by slicing large images into 
smaller pieces. 
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Working with Namo Image Slicer 



Creating a new Namo Image Slicer Project 

To work with images by using Namo Image Slicer, you should first create a Project, which is 
an area where you can slice an image and edit the image slices. 

Creating a Project 

1. Select the [File > New] menu command or click New |3j on the Toolbar. 

2. A new Project, named 'nonameV, is opened. 

3. Opening an existing Project 

4. Select the [File > Open...] menu command or click Open on the Toolbar. 

5. Select a Namo Image Slicer Project file (*.nis) in the Open dialog box and click Open. 

Q You can work with multiple images in multiple Project windows. 

H Namo Image Slicer Project files are saved as a file with the file extension '*.nis'. 

Importing an image into the Project window 

Once you have created a Project, you should import an image to work with into the Project 
window. You can import various types of images (*.psd, *.jpg, *.gif, *.png, *.bmp) into Namo 
Image Slicer. 

1. Select the [File > Import Image...] menu command or click Import Image [S] on the Toolbar. 

2. In the Import image file dialog box, select the image that you want to import. To list the files in a 
specific file format, specify the format from the Files of type drop-down list. 

3. Click Open. The selected image is opened in the Namo Image Slicer's Project window. 

Q Only one image can be inserted into a Project window. To work with another image, 
you should create a new Project by clicking New [3] on the Toolbar. 

Specifying a folder in which the sliced images are to be saved 

You can specify a folder in which the sliced images (both the specified slices and unspecified 
areas) are to be saved by specifying Image folder in the Default tab of the Properties 
window. 

1 . At the Properties window, select the Default tab. (In case the Properties window is not shown, 
select the [Window > Properties] menu command. 

2. Specify the folder in which you want to save the sliced image files (both the image slices and 
unspecified areas) in the Image folder text box. 

H Note that this path is relative to the directory in which the HTML document containing 
the sliced images is saved. 
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Setting Snap and Grid 

Setting the snap and grid options make the image slicing job more convenient. Setting Snap 
lets the image slices meet smoothly by the edge when you slice an image or move image 
slices while selecting Grid allows you to create fine-tuned sliced images and place them at 
the precise position. 

Setting the Snap option 

1 . Select the Snap/Grid/Zoom tab in the Properties window. 

2. Select Neighborhood Snap. 

3. Specify Tolerance of Neighborhood Snap in pixels. Tolerance refers to the application range of the 
Neighborhood Snap option. For example, if you enter '15 pixels' in Tolerance, two image slices 
within 1 5 pixels snap to each other. 

Q Maximum Tolerance value is 15 pixels. 
Selecting the Grid option 

1 . Select the Snap/Grid/Zoom tab in the Properties window. 

2. Select Grid. 

3. Specify the horizontal and vertical spacing of the Grid in Spacing X/Y. 

4. Specify the origin of Grid by specifying Offset X/Y. 

5. To equate X and Y values in Spacing and Offset, select Sync XY. 

6. To activate the snap option, select Snap to grid. If this option is selected, an image slice will snap 
to the grids when it is moved or resized. 



Creating image slices 

To slice an image in the Project window and create image slices, take the following steps. 

1. Select the [Tools > Slicer] menu command or click Slicer Tool |Wj on the Toolbar. 

2. Place the mouse-pointer on the image in the Project window. The mouse-pointer turns into a 
cutter 

3. Click the point, which will be the corner of the image slice to be created, and drag it. When the 
rectangle covers the desired area, release the mouse button. The image slice is displayed as a 
semi-transparent green rectangle. 




— > 
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4. Create another image slice by the same method. When two sliced blocks overlap, the block 
created later is situated on top. 




5. Repeat the steps above to create as many image slices as you want. 

Q The semi-transparent green area is referred to as 'slice', and the other area is 
referred to as an 'unspecified areas'. You can specify the entire image as a slice, as well 
as a portion of it. 

Q The overlapping order of slices is determined by the order of their creation. The later 
the image slice is created, the higher up it is placed. 

Q To switch to the Slicer Tool\> mode from the Selection Tool \k~\ mode, hold down 
the <Ctrl> key. The mouse-pointer turns into a cutter ^% and you can slice the image 
while holding down the <Ctrl> key. 

Q To switch to the Selection Tool \k] mode from the Slicer Tool ' "-. mode, press the 
<Ctrl> key. The mouse pointer turns into a selector and you can select and move 
image slices while holding down the <Ctrl> key. 

Moving an image slice 

You can move the existing image slices by dragging or entering the position information. As 
you move the slice, its original position and the current position are displayed in the status bar 
at the bottom. 

1. Select Selection Tool [ST] on the Work Tools Toolbar. In case the Work Tools Toolbar is not 
displayed, select the [View > Work Tools] menu command. 

2. Click any of the image slices in the Project window. The border of the selected image slice is 
displayed as blue. 

3. Choose one of the following methods. 

• Drag the slice to the desired position. While you are holding down the mouse button, the 
mouse-pointer appears as a hand shape 

• Select the Slice tab of the Properties window. Specify the position of the image slice by 
entering the top-left x/y coordinate in Top and Left. 
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Resizing an image slice 

You can resize an image slice by dragging or entering the size information. 

1. Select Selection Tool \k] on the Work Tools Toolbar. 

2. Click any of the image slices in the Project window. The border of the selected image slice is 
displayed as a blue rectangle and the 8 resize handles appear around the selected slice. 

3. Choose one of the following methods. 

• Place the mouse-pointer on one of the resize handles. The mouse-pointer then turns into 
an arrow. Drag the arrow until the selected slice reaches the desired size. 

• Select the Slice tab of the Properties window. Specify the size of the image slice by 
entering the values in Width and Height. 

Setting the default output file format 

You should specify the type of file format of the image slices and the folder they are to be 
saved in. These settings are used when the specified image slices and unspecified areas are 
saved by executing the [File > Export to HTML... ] menu command. 

1 . At the Properties window, select the Default tab. 

2. Specify HTML Options. 

• Export as a Namo Layout Table 

Exports the table containing the image slices and unspecified areas as a Namo 
WebEditor 5.5's Layout Table. 

• Use <spacer> tag 

Netscape does not fully support Namo WebEditor 5.5's Layout Table. To avoid this 
problem, select this check box and Namo Image Slicer will automatically inserts the 
<spacer> tag, one of the Netscape specific tags. 

3. Select the file format of the image slices from the File format drop-down menu. You can choose 
from JPG (24bpp max), PNG (24bpp max), and GIF (8bpp max). 

4. In case you have selected GIF (8bpp max), you should specify the Color Reduction which 
becomes available only when you have selected GIF (8bpp max). 

H If you want to save a specific image slice in a file format other than that of the other 
image slices, refer to Setting the file format of a specific image slice. 
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Modifying the overlapping order of image slices 

In case more than two image slices are overlapped, the lower image slice is sliced 
automatically in accordance with the image slice(s) placed above. In such case, you may get 
the unexpected image slices. You can avoid this problem by reordering the overlapped image 
slices. 

1 . Select Selection Tool [Vj on the Work Tools Toolbar. Click the image slice that you want to 
reorder in the Project window. 

2. The border of the selected image slice is displayed in a blue rectangle and the 8 resize handles 
appear around the selected slice. 

3. Use the submenu of the [Edit > Arrange] menu command or click the relevant button on the 
Work Tools Toolbar. 



E>i Bring to Front 



Brings the selected image slice to the forefront position. 



Bring Forward 



Brings the selected image slice one step to the front. 



Send Backward 



Sends the selected image slice one step to the back. 



Send to Back 



Sends the selected image slice to the farthest position. 



Deleting an image slice 

To delete an existing image slice, take the following steps. 

1. Select Selection Tool [V] on the Work Tools Toolbar. 

2. Click the image slice that you want to delete in the Project window. The border of the selected 
image slice is displayed in a blue rectangle and the 8 resize handles appear around it. 

3. Select the [Edit > Delete] menu command or press the <Del> key. The selected image slice is 
removed. 
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Setting the file format of a specific image slice 

When you export the Image Sheer Project to a HTML file, the image slices are saved as the 
file format you have specified in File format in the Default tab of the Properties window 
and saved as images inserted into each cell. However, you can specify a different file format 
to a specific slice as that you want. 

Specifying the method in which the image slices are saved 

1. Select Selection Tool [V] on the Work Tools Toolbar. 

2. Select the image slice you want to work with in the Project window. 

3. Specify the format of the selected slice from the Export the selected slice as drop-down menu at 
the Slice tab of the Properties window. 

• Plain image 

Saves the selected slice as an image inserted in the cell using the <img> tag. 

• Cell background image 

Saves the selected slice as a cell background image. Selecting this options will allow you 
to insert other texts or images inside the cell. 

• Empty cell 

Does not save the selected slice. Instead it is displayed as an empty cell in the exported 
HTML document. Select this option when you want to exclude the unnecessary (or 
unwanted) slices. 

Saving the selected slice in a specific file format 

1. Select Selection Tool [V] on the Work Tools Toolbar. 

2. Select the image slice you want to work with in the Project window. 

3. Deselect Use default besides Image format at the Slice tab of the Properties window. 

4. In case you have selected GIF (8bpp max), you should specify the Color Reduction which 
becomes available only when you have selected GIF (8bpp max). 

H By default, an image slice has the file name of "Project file name_number.extension". 
To specify your own filename, deselect Use autonaming and enter the filename you 
want in the text box below. 
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Setting the options for unspecified areas 

The green semi-transparent area is referred to as 'slice', and the rest is referred to as 
'unspecified areas'. You can make either the entire image or a portion of it as a slice. If you 
select the [File > Export to HTML...] menu command, the unspecified areas are saved as 
you specified in the Slice tab of the Properties window. 

1. Click one of the unspecified area blocks using Selection Tool 

2. Select the Slice tab of the Properties window and specify the type of the unspecified areas under 
Export unspecified area as. 

• Plain images 

Saves the unspecified areas as images inserted in the cell using the <img> tag. 

• Cell background images 

Saves the unspecified areas as cell background images. Selecting this options will allow 
you to insert other texts or images inside the cell. 

• Empty cells 

Does not save the unspecified areas. Instead it is displayed as empty cells in the 
exported HTML document. Select this option when that you want to exclude the 
unnecessary (or unwanted) slices. 



Exporting image slices to an HTML file 

You can export the sliced images (both the image slices and the unspecified areas) to an 
HTML file. 



1. Select the [File > Export to HTML...] menu command or click Export to HTML... _|| on the 

Toolbar. 

2. In the Export to HTML As dialog box, specify the filename and the folder that the HTML file will 
be saved in and click Save. 

23 Note that this path, specified at the Image folder text box in the Default tab of the 
Properties window, is a relative path to the directory in which the exported HTML 
document containing image slices is saved. 
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Appendices 

Appendix A: Importing Microsoft Word Documents 
Appendix B: Sending a Document as E-mail 
Appendix C: List of Keyboard Shortcuts 



Appendix A: Importing Microsoft Word Documents 



Namo WebEditor can open documents created with any versions of Microsoft Word. The 
proprietary formatting of the Word document will be converted to HTML and CSS tags, 
preserving as much of the original document's appearance as possible. 

To import a Microsoft Word document, do this: 

1 . Select the [File > Oepn] menu command. 

2. In the Open dialog box, locate and select the Word document. If no Word documents appear, 
select either All Files or MS Word Files in the Files of type drop-down menu. After selecting a file, 
click OK. 

3. In the External File Import dialog box, select options to tell Namo WebEditor how to handle the 
formatting information in the Word document, and then click OK. 



The import options are: 

Keep original format 

As much of the original formatting as possible will be preserved by using CSS attributes and 
<f ont> tags. This option imports the document as faithfully as possible, but the HTML source of 
the imported document may be diffucult to edit due to the large number of tags and attributes that 
are generated. 

Use only <FONT> tags 

Only <f ont> tags will be used when converting the formatting in the original document. CSS 
attributes will not be used. This option sacrifices some faithfulness to the formatting of the original 
document in favor of cleaner HTML source. 

Import text only 

Only the text of the original document will be imported. All formatting information, except for tables, 
paragraph breaks, and line breaks, will be discarded. This option produces the cleanest HTML 
source, but almost all formatting information is lost. 

Use CSS properties 

Select this check box to use CSS attributes when importing the document. 
Use <FONT> tags 

Select this check box to use <f ont> tags when importing the document. 
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Appendix B: Sending a Document as E-mail 



To send a Web document by e-mail, do this: 

1 . Open the document that you want to send as e-mail. 

2. Select the [File > Send e-mail] menu command. Your e-mail program will be launched and a new 
message created, with the Web document inserted into the body of the message. 

3. Enter the recipient's e-mail address and a subject line, and then send the e-mail. 

Namo WebEditor even includes a selection of professionally-designed templates for birthday 
cards, holiday greetings, thank-you notes, and so forth that are especially well suited for 
sending as e-mail. Many of the templates contain animated images. To use one of the greeting 
card templates, do this: 

1 . Select the [File > New] menu command. 

2. In the Components tab of the Resource Manager, select a greeting card template in the preview 
pane on the right. 

3. Click OK. A new document will be created using the selected template. 

4. Type the recipient's name, your words of greeting, and your name into the document. 

5. Use the [File > Send e-mail] menu command to send the document as e-mail. You do not need to 
save the document first. 
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Appendix C: list of Keyboard Shortcuts 



File Menu 



Function 


Key 


Menu Path 


Description 


New 


Ctrl + N 


File > New... 


Opens a new document. 


Open 


Ctrl + 0 


File > Open... 


Opens a document in the hard drive or 
on the WWW. 


Close 


Ctrl + F4 


File > Close 


Closes the current document. 


Save 


Ctrl + S 


File > Save 


Saves the document. 


Save Site 


Alt + Shirt 

+ S 


rile > bite > Save 
Site... 


Saves the current site. 


Save As 


Ctrl + D 


rile > Save > Save 
As... 


Saves the current document as 
another document. 


Publish 


F4 


File > Publish > 
Publish... 


Transmits the local files to the remote 
server. 


Print 


Ctrl + P 


File > Print... 


Prints the document 


Document 
Properties 


Ctrl + F2 


File > Document 
Properties... 


Shows the properties of the current 
document. 


Document 
Information 


Ctrl + Fl 


File > Document 
Information... 


Shows the detailed information about 
the current document. 


Close 


Ctrl + F4 


File > Close 


Closes the document. 


Exit program 


Alt + F4 / 
Alt + X 


File > Exit 


Exits Namo WebEditor 
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Edit Menu 



Function 


Key 


Menu Path 


Description 


Qplprt All 
Oclctl nil 


Ctrl 4- A 

V_- 111 1 l\. 


Edit > Select 
All 


Cplppfc oil thp plpmpntc in thp Pnit w/itiHnix/ 

-1L1LL-1> till 111L ddlldll?) 111 lllv_ LU 1 1 W111UUW. 


Cut 


Ctrl + X 


Edit > Cut 


Cuts the selected area. 


Copy 


Ctrl + C 


Edit > Copy 


Copies the selected area. 


Append Selection 
to Clipboard and 
Delete 


Ctrl + Shift 

V_-lll * Olllll 

+ x 




f^ntc trip cplpptpn firpi} in £*nnitir\n tr\ trip 
v^uia liic iciccicu aica 111 auuiuuu i\j liic 

previously cut elements. 


Append Selection 
to Clipboard 


Ctrl + Shift 
+ C 




Copies the selected area in addition to the 
previously copied elements. 


Paste 


Ctrl + V 


Edit > Paste 


Inserts the copied or cut elements. 


Delete 


Del 


Edit > Delete 


Deletes the selected area. 


Undo 


Ctrl + Z 
Alt + 

Backspace 


Edit > Undo 


Undoes the last task. 


Redo 


Alt + Z 


Edit > Redo 


Redoes the last task undone. 


Find 


Ctrl + F 


Edit > Find... 


Finds the specified word(s) or phrase(s) in 
the current document. 


Replace 


Ctrl + H 


Edit> 
Replace... 


Finds the specified word(s) or phrase(s) in 
the current document and replaces them 
with another word(s) or phrase(s) . 


Find Again 


F3 


Edit > Find 
Again 


Repeats the last 'Find' task. 


Copy Format 


Shift + F2 


Edit > Copy 
Format... 


Copies the character or paragraph formats 
as specified. 


Paste Format 


F2 


Edit > Paste 
Format 


Applies the formats copied by the Copy 
Format command. 


Global Find and 
Replace 


Ctrl + Shift 
+ F 


Edit > Global 
Find and 
Replace 


Finds the word(s) or phrase(s) in the 
current site or a specific folder and 
replaces them with another word(s) or 
phrase(s) 
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Additional Edit Menu 



Function 


Key 


Menu Path 


Description 


Delete Next Item 


Ctrl + Del 




Deletes the word and space after the 
current cursor position. 


Delete Previous Item 


Ctrl + Back 




Deletes the word and space before the 
current cursor position. 


Delete Line 


Ctrl + Y 




T""Y 1i.11" 1 .1 • 

Deletes the line where the cursor is 
located. 


Move to Top of Document 


Ctrl + Home 




Moves the cursor to the document's 
beginning. 


Move to End of Document 


Ctrl + End 




Moves the cursor to the document's 
end. 


Move to Top of Window 


Ctrl + Page 
Up 




Moves the cursor to the iirst line oi 
the window. 


Move to Bottom of 
Window 


Ctrl + Page 
Down 




» a .| ,,1 1 j 1 * f"*.l 

Moves the cursor to the last line oi the 
window. 


To the head of the 


Ctrl + <- 




Moves the cursor to the head ot the 
previous word. 


To the head of the next 
word 


Ctrl + -> 




Moves the cursor to the head of the 
next word. 


Switch to next open 
document 


Ctrl + Tab 




Switches to the next document tab. 


Switch to previous open 
document 


Ctrl+ Shift 
+Tab 
Ctrl + Alt 
+Tab 




Switches to the previous document 
tab. 
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View Menu 



Function 


Key 


Menu Path 


Description 


Show/Hide Rulers 


Alt + Shift + R 


View > Rulers > 

CU^.., All 

Show All 


Shows or hides Rulers in the 
Edit window. 


View with Netscape (View 
with Browser 1) 


1 12 


View > View 
with Netscape 


Displays the current 
document in Netscape 
(Browser 1). 


View with Internet 
Explorer (View with 
Browser 2) 


Fll 


View > View 
with Internet 
Explorer 


Displays the current 
document in Internet 
Explorer (Browser 2). 


Auto Detect 


F5 


View > Encoding 
> Auto Detect 


Sets the document encoding 
automatically. 


Refresh Screen 


Shift + F5 


View > Refresh 
Screen 


Refreshes the screen by 
getting the latest information. 


Enlarge/Reduce Screen 


Ctrl+ Mouse 

Wheel 

Adjustment 




Enlarges or reduces the Edit 
window. 
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Insert Menu 



Function 


Key 


Menu Path 


Description 


Insert Line 
Break <br> 


Shift + Enter 


Insert > Line Break > 
Normal 


Inserts a line break without making 
a new paragraph. 


Symbol 


Ctrl + F7 


Insert > Symbol... 


Inserts symbols and special 
characters. 


Insert Image 


Ctrl+ Shift + 1 


Insert > Image... 


Inserts images. 


Insert Layer 


Ctrl + Shift + A 


Insert > Layer 


Inserts a layer. 


Resize Layer 


Ctrl + Arrow 
keys 


Layer resizing after 
selecting one 


Enlarges/Reduces a layer by 1 
pixel. 


Ctrl + Shift + 
Arrow keys 


Enlarges/Reduces a layer by 1 0 
pixels. 


Move Layer 


Arrow keys 


Moving layer after 
selecting one 


Moves a layer by 1 pixel. 


Shift + Arrow 
keys 


Moves a layer by 10 pixels. 


Script Wizard 


Alt+ Shift + W 


Insert > Script > 
Script Wizard... 


Opens the Script Manager. 


Create 
Hyperlink 


F9 


Insert > Hyperlink... 


Creates a Hyperlink. 


Open Hyperlink 


Alt + Mouse 
click 




Opens a hyperlinked document in 
the Edit window. 


Remove 
Hyperlink 


Shift + F9 


Insert > Remove 
Hyperlink 


Removes a hyperlink. 


Bookmark 


Ctrl + G 


Insert > Bookmark 


Inserts a bookmark at the specified 
location. 


Assign 
Bookmark 


Ctrl + K * 




Assigns a bookmark 


Jump to 


Ctrl + Q ** 




Jumps to an assigned bookmark 



* Press a number key from 0-9 or a letter key from A-Z after pressing Ctrl + K 

** Press a number key from 0-9 or a letter key from A-Z after pressing Ctrl + Q to move to a 
previously assigned temporary bookmark, or press Ctrl + Q + P to move to the closest bookmark 
above the insertion point. 
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Format Menu 



Function 


Key 


Menu Path 


Description 


Character Format 


Ctrl + L 


Format > Font... 


Specifies the character formats. 


Font Color 


Ctrl + J 




Applies the latest font color to the 
selected text. 


Paragraph 
Format 


Ctrl + T 


Format > Paragraph... 


Specifies the current paragraph 
formats. 


Paragraph Style 


oniii t ro 


Format > Paragraph 
Style- 


opecmes me paragrapn siyies. 


Style Sheets 


Ctrl + F6 


Format > Style Sheet- 


Specifies the document style 
sheets. 


Page Break 


Ctrl + Enter 


Format > Page Break > 
Insert Page Break 


Breaks pages for print. 


Split List 


Shift + F8 


Format > Split List 


Splits a list. 


Merge List 


F8 


Format > Merge Lists 


Merges separate lists. 


Increase Indent 


Ctrl + ] 


Format > Increase Indent 


Increases the indent of the 
paragraph. 


Decrease Indent 


Ctrl + [ 


Format > Decrease 
Indent 


Decreases the indent of the 
paragraph. 


Clear Character 
Format 


Ctrl + E 




Clears all character formatting of 
the selected text. 


View Attributes 


Alt + Enter 




Displays the attributes of the 
selected object 
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Table Menu 



Function 


Key 


Menu Path 


Description 


Table Properties 


Ctrl + Shift + T 


Table > Table 
Properties... 


Specifies the table properties. 


Select Table 


Alt + Shift + T 


Table > 
Select > 
Table 


Selects the table where the cursor is 
currently located. 


Cell Properties 


Ctrl + Shift + L 


Table > Cell 
Properties... 


Specifies the cell properties. 


Delete Contents 


Ctrl + Shift + Y 


Table > 

Delete 

Contents 


Deletes only the contents in the cell(s). 


To the previous 
cell 


Shift + Tab 




Moves to the previous cell. 


To the next cell 


Tab 




Moves to the next cell. 


Merge Tables 


Ctrl + F8 




Merges two separate tables. 


Split Table 


Shift + F8 




Splits a table into two tables. 



Frame 



Function 


Key 


Menu Path 


Description 


New Document in 
Frame 


Ctrl + Shift + N 


Frame > New 
Document in Frame 


Opens a new document in the 
selected frame. 


Frame Properties 


Ctrl + Shift + R 


Frame > Frame 
Properties 


Specifies the properties of the 
current frame. 


Save All Frames 


Ctrl + Shift + S 


Frame > Save All 
Frames... 


Saves all the frames in the Edit 
window. 


Print Frameset 


Ctrl + Shift + P 


Frame > Print 
Frameset... 


Prints the selected frame. 
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Tools 



Function 


Key 


Menu Path 


Description 


Check Spelling 


F7 


Tools > Check 
Spelling... 


Checks the spelling from the cursor 
position to the end of the 
document. 


Auto Correct 


Shift + F7 


Tools > Auto Correct... 


Specifies the Auto Correct items 
and options. 


Image Effects 


Alt + Shift 
+ 1 


Tools > Image Effects... 


Applies various effects to images. 


Start/Stop Key 
Macro Recording 


Ctrl + Shift 

i ivl 


Tools > Key Macro > 
Start Recording/ Stop 
Recording 


Starts or Stops the Key Macro 
recording. 


Play Macro 


i_.in t ivi 


Tools > Key Macro > 
Play Macro 


riays ine recorueu ivey iviacro. 


Key Macro 
Manager 


Ctrl + Shift 
+ 0 


Tools > Key Macro > 
Key Macro Manager 


lV/f tinker tnp \C c*\i l\/f£if*rA fp^itiirp 
iviaiiagco iiic i\.cy iviav^iu icaiuic. 


Quick Insert 


Ctrl + = * 




Inserts a Quick Insert item. 


Import from 
Internet Explorer 


Shift + F 12 




Imports the Web page in Internet 
Explorer into the Edit window. 


Import from 
Netscape 


Shift + F11 




Imports the Web page in Netscape 
into the Edit window. 



* Inserting a Quick Insert item.- Enter a shortcut for a Quick Insert item and click < Ctrl + =>. The 
specified Quick Insert item is inserted in the Edit window. 
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Window 



Function 


Key 


Menu Path 


Description 


one ividiidger 


Alt + 1 

r\.ll i 1 


Window > Site 
Manager 


WUCIla II1C ollC IVlallagCI. 


Result window 


Alt 4- ? 


winnow rvcsuii 


Opens the Result window and shows the 
status of the links. 


Document 
Outline 


Alt + 3 


Window > Document 
Outline 


Shows the document outline in the left gray 
window. 


Timeline 


Alt + 4 


Window > Timeline 


Opens the Timeline window. 


Layer List 


Alt + 5 


Window > Layer List 


Shows the list of layers in the current 
document. 


Inspector 


Alt + 6 


Window > Inspector 


Opens the Inspector window. 


Action 


Alt + 7 


Window > Action 


Opens the Action window. 


Window List 


Ctrl + W 


Window > Window 
List... 


Shows the number and list of documents in 
the Edit window. 


HTML (F6) tab 


F6 




Switches to the HTML tab. 
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Format 



Function 


Key 


Menu Path 


Description 


Bold 


Ctrl + B 




Makes the selected text bolded. 


Italic 


Ctrl + 1 




Makes the selected text italicized. 


Underline 


Ctrl + U 




Applies underlining to the selected text. 


Normal 


Ctrl + 0 




Specifies the paragraph style as normal. 


Heading 1 


Ctrl + 1 




Specifies the paragraph style as Heading 1 . 


Heading 2 


Ctrl + 2 




Specifies the paragraph style as Heading 2. 


Heading 3 


Ctrl + 3 




Specifies the paragraph style as Heading 3. 


Heading 4 


Ctrl + 4 




Specifies the paragraph style as Heading 4. 


Heading 5 


Ctrl + 5 




Specifies the paragraph style as Heading 5. 


Heading 6 


Ctrl + 6 




Specifies the paragraph style as Heading 6. 


Preformatted text 
style 


Ctrl + 7 




Specifies the paragraph style to the preformatted 
text style. 


Numbered List 


Ctrl + 8 




Specifies the paragraph style as a numbered list. 


Bulleted List | Ctrl + 9 




Specifies the paragraph style as a bulleted list. 
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Help 



Function 


Key 


Menu Path 


Description 






Help > Namo 




Help 


Fl 


WebEditor 


Opens the Help of Namo WebEditor. 






Help 




Context 
Help 


Shift + F1 




Turns the mouse-pointer to the '?'. Namo WebEditor 
gives the information of a certain element when you 
click it. 
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Index 



A 

Absolute link 107 

Action 250 

Action List 253,259, 260 

Attaching Actions 249, 259 

Action window setting 10 

ActiveX control 3, 215, 219 

Animated GIFs 133 

Auto Correct 22 

B 

Background image 137 

Background sound 221 

Bevel effect 143 

Bitmap 131 

Block element properties 294 

Body Script 251 

Bookmarks 109 

Creating bookmarks 105, 1 1 8 

Browser compatibility 330 

C 

Cascading Style Sheets (CSS) 86 

Cell Properties 164 

Character Formats 84 

Character set 75 

Chart 296 

Appearance 306 

Axis options 308 

Chart 295, 296 

Chart image files 309 

Chart title 306 

Chart type 305, 306 

Chart Types 295,300 

Chart Wizard 297 

Data series 307 

Chart Properties 295, 305 



Series options 308 

Trendlines 309 

Chart block 282 

Chart Wizard 296 

Child table 168 

Class styles 98 

Clip Art 138 

Color Picker 134 

Comments 24 

Copy 20 

CSS style borders 175 

Cut 20 

D 

Database 262 

Microsoft Access database 268 

Database Connection 265 

Database Wizard 261, 266 

Adding a hidden field 288 

Adding an input field 287 

Adding an output field 290 

Block element properties 294 

Chart block 282 

Data source 270 

Database fields 270 

Detail block 282 

Document type 268 

Drop-down menu 288 

Join statement 273 

Order statement 273 

Where statement 274 

Hyperlinked output field 290 

Input block 279 

List block 281 

Modification block 279 

Parameters 294 

Radio button group 288 

Selection statement 272 

Table block 280 

Types of block elements 275 

Database-Enabled Web Document 263 

Database fields 270 

Data series 307 

Data source 270 

Date 25 



DBCS 25 

Detail block 282 

Document 11,20 

Creating a New Document 11,14 

Document encoding 27 

Document Properties 1 1, 27 

Opening a Document 11, 17 

Printing a Document 1 1 , 29 

Saving a Document 11,15 

Document Formatting 96 

Document outline 25, 312 

Table of Contents 316 

Document Script 251 

Document Styles 85, 100 

Document tabs 2 

Document templates 97 

Document title 27 

Document type 268 

Downloading files 71,81 

Drop shadow effect 144 

E 

Edit window 2, 4 

Encoding 27 

Equation 24 

Event 250 

Event List 257, 259, 260 

External Source Editing Programs 

323,331 

External style sheet 101 

External URL 69 

Export area 158 

Exporting image slices 340 

F 

Find 21 

Flash.... 31, 32, 34,37, 70, 109, 120, 121, 
... 123, 124, 129, 132, 139, 161,214, 
215,216 

Flash Button 161 

Changing the text 161 



Inserting a Flash Button 1 29, 1 6 1 

Modifying the link 161 

Flash Button navigation bar 109 

Form 242 

Form Fields 241,242, 243 

Modifying form properties 247 

Format 84 

Bulleted lists 93 

Character Formats 84 

Character Formatting 90 

Document Formatting 96 

Document templates 97 

HTML styles 95 

Indentation 93 

Line height 95 

Numbered lists 93 

Page margins 96 

Paragraph Formats 84 

Paragraph Formatting 92 

Paragraph styles 95 

Frame 202 

Creating Frames 201, 205 

Frame Properties... 203, 205, 207, 209 

Frameset 202 

Modifying Frames 201, 207 

Printing a Frameset 201 , 2 1 1 

Removing frames 206 

Saving frames 210 

Splitting a frame 205 

Frame effect 145 

Target frame 203,207 

Frameset 202 

FTP Server 80 

G 

GIF 132 

Grid 5 

Guides 6 

H 

Hidden field 288 

Horizontal line 23 

Hover style 104 

HTML 13 
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HTML CleanUp 326 

HTML Sources 323, 328 

Microsoft Word specific tags 328 

HTML Sources 323, 328 

HTML styles 95 

HTML Tags 323,327 

HTML Verification 326 

HTML window 324 

Hyperlinked output field 290 

Hyperlinks 106 

Absolute 107 

Bookmarks 109 

Creating bookmarks 1 05, 118 

Creating hyperlinks 105, 

112, 113, 119, 140 

Modifying hyperlinks 105, 1 14 

Relative 107 

Removing hyperlinks 116 

Rollover effect 115 

URL 106 



Interlaced GIF 133 

JPG (or JPEG) 132 

Loading Time 133 

Modifying Images 129, 139 

Pixel 131 

PNG 133 

Progressive GIF 133 

Vector images 131 

Inspector 10 

setting 10 



Java Applets 215,220 

Join statement 273 

JPG (or JPEG) 132 

K 

Key macros 314 

Keywords 28 



Indentation 93 

Internal styles 101 

Input block 279 

Input field 287 

Image Effects 

....129, 143, 144, 145, 146, 147, 252 

Bevel effect 143 

Drop shadow effect 144 

Frame effect 145 

Resizing images 139, 147 

Rotating images 146 

Images 129, 130 

Animated GIFs 133 

Background image 137 

Bitmap 131 

Clip Art 138 

Color Picker 134 

Color Picker dialog box 135 

Colors 131 

GIF 132 

Image description 133 

Image File Formats 131, 159 

Image Map 129, 134, 148 

Inserting an image 137, 245, 333 



Layer 224 

Aligning multiple layers 234 

Applying effects to layers .... 226, 234 

Copying and pasting layers 232 

Creating Layers 223, 229 

Layer components 225 

Layer Inspector 226, 233 

Layer list 226 

Modifying Layers 223, 230 

Moving layers 230 

Overlapping layers 232 

Resizing layers 23 1 

Viewing the layer list 233 

Layout Cell 188 

Aligning objects 198 

Copying a layout cell 198 

Deleting a layout cell 200 

Inserting a layout cell 188, 193 

Moving a layout cell 194 

Resizing a layout cell 194 

Selecting a layout cell 193, 194 

Layout Table 1 86 

Converting a layout table 187, 190 

Deleting a layout table 190 
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Grid 187 




Inserting a layout table 


187, 189 


Modifying grid properties... 


191 


Resizing a layout table 


191 


Line height 


95 


List block 


281 


Loading Time 


133 



M 

Macros 312 

Key macros 314 

Manual line break 26 

Marks 3 

Meta tag 28 

Microsoft Access database 268 

Microsoft Word specific tags 328 

MIDI 214,217, 221 

Modification block 279 

Multimedia 214 

ActiveX control 3,215,219 

Flash 31, 

32, 34, 37, 70, 109, 120, 121, 123, 
124, 129, 132, 139, 161,214, 215, 
216 

Inserting a background sound 221 

Inserting Multimedia Objects213, 216 

Inserting spreadsheets 221 

Java Applets 215,220 

MIDI 214,217, 221 

Plug-in 215 

QuickTime 133, 214, 215, 217 

RealAudio 214,215,218 

Shockwave 214,215,216 



N 



Namo Image Sheer 332, 333 

Creating a Project 334 

Creating image slices 335 

Default output file format 337 

Deleting an image slice 338 

Exporting image slices 340 

Moving an image slice 336 

Resizing an image slice 337 

Snap and Grid 335 

Unspecified areas 340 



Navigation Bar 51, 109 

Flash Button navigation bar 109 

Modifying Navigation Bars ..105, 123 

Navigation Tree 54, 

68,69, 105, 109, 126, 127, 321,322 

Path navigation bar 109 

Site Structure 110 

Smart Button navigation bar 109 

Text navigation bar 109, 120 

New Document 11,14 

New site 62 

Non-breaking space 25 

Numbered lists 93 

O 

Opening a Document 11, 17 

Order statement 273 

Output field 290 

P 

Page breaks 29 

Page layout 29 

Page margins 96 

Page setup 29 

Paragraph Formats 84 

Paragraph styles 95 

Paste 20 

Path navigation bar 109 

Photo Album 135 

Inserting captions 1 54 

Saving files 80, 152 

Selecting a layout style 150 

Selecting files 149 

Thumbnail 136 

Thumbnail effect 152 

Pixel 131 

Plug-in 215 

PNG 133 

Preview 26 

Print 29 

Page layout 29 

Page setup 29 
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Progressive GIF 133 

Publishing 72 

Character set 75 

Deleting files 81 

Downloading files 71,81 

FTP Server 80 

Publish information 48, 73 

Publishing a Web Site 71, 77 

Remote Site 77 

Synchronize 78 

Publish tab 61 

Q 

Quick Insert 312 

Quick Insert item 313 

QuickTime 133,214,215,217 

R 

RealAudio 214,215,218 

Recent files 18 

Redo 22 

Refresh 19 

Relative link 107 

Reload 19 

Remote Site 77 

Replace 22 

Report tab 61 

Using the Report Tab 59, 70 

Resizing images 139, 147 

Resource Manager 31, 32 

All 32 

Clip Art 32 

Color Set 32 

Component 32 

Flash Button 32 

New group 35 

Smart Button 32 

Table Style 32 

Theme 32 

Unzip 33 

Zip 33 

Rollover effect 115 

Rotating images 146 



Row Properties 164 

Rulers 5 

S 

Saving a Document 11, 15 

Script 250 

Body Script 251 

Document Script 251 

Script Wizard 251 

Using the Script Wizard 249, 258 

Section 69 

Section templates 85 

Selection statement 272 

Series options 308 

Shockwave 214,215,216 

Site 60 

Adding a section 69 

Adding documents 68 

Inserting an external URL 69 

Moving/Copying documents 67 

New site 62 

Removing documents 67, 69 

Site Management 59, 64 

Site Structure 59, 66 

Updating navigation bars 67 

Site Manager 61 

Publish tab 61 

Report tab 61 

Site tab 61 

Using the Report Tab 59, 70 

Site Structure 110 

Site tab 61 

Site Wizard 41 

Using the Site Wizard 41, 42 

Publish information 48, 73 

Site Information 47 

Site Structure 44 

Template 43 

Theme 46 

Smart Button 136 

Applying various effects 156 

Background color 159 

Export area 158 

Inserting a Smart Button 129, 155 
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Modifying the Smart Button Properties 129, 



156 

Resizing a Smart Button 1 59 

Saving a Smart Button 158 

Smart Button text 159 

Smart Button navigation bar 109 

Source Control 318 

Check In Files 321 

Checking files out 321 

Connecting to Source Control 319 

Disconnecting from Source Control ... . 319 

Getting the latest version 320 

SourceSafe Explorer 319 

SourceSafe project 320 

Spelling check 23 

Spreadsheets 221 

Status bar 2 

information 2 

show or hide 2 

Style 86 

Cascading Style Sheets (CSS) 86 

Letter spacing 104 

Class styles 98 

Document Styles 85, 100 

Document templates 85 

External style sheet 101 

Hover style 104 

Internal styles 101 

Line height 103 

Paragraph Styles 98 

Section templates 85 

Style attributes 100 

Style Sheet 86 

Styles 84 

Summary 28 

Synchronize 78 

Symbols 24 

T 

Table 163, 164 

Applying table styles 181 

background for the table/cell/row. 178 

Cell Properties 1 64 

Changing the table/cell borders .... 175 

Child table 168 

Converting Tables 1 63, 1 82 

Creating a chart 183,282 



Creating Tables 1 63, 1 67 

CSS style borders 175 

Deleting a table 173 

Deleting contents of the cells 1 79 

Deleting rows or columns 173 

Fixing the table size 176 

Importing spreadsheet into a table 1 84 

Inserting rows or columns 172 

Inserting/Removing a caption 177 

Merging cells 174 

Merging tables 1 80 

Modifying Tables 163, 171 

Resizing the table 176 

Row Properties 1 64 

Selecting Tables 163, 169 

Sorting tables 183 

Splitting cell(s) 174 

Splitting the table 180 

Table Gridlines 165 

Table Inspector 165 

Table Properties 1 64 

Table Style 166 

Table Toolbar 165 

Transposing a table 181 

Table block 280 

Table of Contents 316 

Target frame 203, 207 

Task Automation 312 

Template 42 

Text navigation bar 109, 120 

Theme 49, 50 

Navigation bar 55, 122 

Navigation tree 54, 126 

Styles 57 

Theme Components 50 

Theme objects 52 

Theme properties 58 

Thumbnail 136 

Thumbnail effect 152 

Time 25 

Time Line 226 

Attaching actions 240 

Curved-path animation 239 

Recording the path of a layer 237, 239 

Straight-line animation 237 

Time Line Terms 228 

Working with Time Lines 223, 236 

Toolbars 8 
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Editing toolbars 8 

U 

Undo 22 

Unspecified areas 340 

Unzip 33 

URL 106 

V 

Vector images 131 



W 

Web document 12 

Web server 12 

Where statement 274 

Window size 4 

Windows 4 

window arrangement 4 

WYSIWYG 13 

Z 

Zip 33 
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